Parcel は、開発者の経験によって生まれた Web アプリケーションバンドラです。設定不要で、マルチコア処理を利用した驚異的な高速パフォーマンスを提供します。
Parcelのインストール(Install Parcel)
ParcelBundler(※日本語版)をインストール。
※今のところ、Parcel 1に対応している模様。
Bootstrapのインストール(Install Bootstrap)
npmを使用して、Node.jsモジュールとしてBootstrapをインストール。
Bootstrapは、peerDependencies
プロパティで指定されているPopperに依存している。つまり、npm install @popperjs/core
を使用して、両方を package.json
に追加する必要がある。
すべてが完了すると、プロジェクトは次のように構成される:
project-name/
├── build/
├── node_modules/
│ └── bootstrap/
│ └── popper.js/
├── scss/
│ └── custom.scss
├── src/
│ └── index.html
│ └── index.js
└── package.json
JavaScriptのインポート(Importing JavaScript)
BootstrapのJavaScriptをアプリケーションのエントリーポイント(通常は src/index.js
)にインポートする。すべてのプラグインを1つのファイルにインポートすることも、サブセットのみが必要な場合は個別にインポートすることも可能。
設定例
すべてのプラグインをインポートimport * as bootstrap from 'bootstrap';
必要なプラグインのみをインポート(例:ツールチップ、トースト、ポップオーバーの場合)import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';
1つだけインポート(例:アラートのみの場合)import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';
CSSのインポート(Importing CSS)
Bootstrapの可能性を最大限に活用し、ニーズに合わせてカスタマイズするには、プロジェクトのバンドルプロセスの一部としてソースファイルを使用する。
独自の scss/custom.scss
を作成して、BootstrapのSassファイルをインポートしてから、組み込むカスタム変数を上書きする。
アプリケーションの構築(Build app)
終了タグ </body>
の前に src/index.js
を組み入れる。
設定例
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
package.json
の編集(Edit package.json
)
package.json
ファイルに dev
と build
の各スクリプトを追加する。
設定例
"scripts": {
"dev": "parcel ./src/index.html",
"prebuild": "npx rimraf build",
"build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}
devスクリプトの実行(Run dev script)
アプリケーションには http://127.0.0.1:1234
からアクセス可能。
実行コード$ npm run dev
アプリケーションファイルの構築(Build app files)
構築されたファイルは build/
フォルダの中にある。
実行コード$ npm run build