Parcel v5.0.0-beta3新設
Parcelを使用してプロジェクトにBootstrapを組み込む方法を学習する。
Parcel は、開発者の経験によって生まれた Web アプリケーションバンドラです。設定不要で、マルチコア処理を利用した驚異的な高速パフォーマンスを提供します。
Parcelのインストール（Install Parcel）
ParcelBundlerをインストール。
※現在はParcel 2がインストールされる模様
Bootstrapのインストール（Install Bootstrap）
npmを使用して、Node.jsモジュールとしてBootstrapをインストール。
Bootstrapは、peerDependencies プロパティで指定されているPopperに依存している。つまり、npm install @popperjs/core を使用して、両方を package.json に追加する必要がある。
すべてが完了すると、プロジェクトは次のように構成される：
project-name/
├── build/
├── node_modules/
│ ├── @popperjs/ v5.2.0変更
│ │ └── core/ v5.2.0変更
│ └── bootstrap/
├── scss/
│ └── custom.scss
├── src/
│ ├── index.html
│ └── index.js
└── package.jsonJavaScriptのインポート（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）v5.2.0設定変更
終了タグ </body> の前に src/index.js を組み入れる。
設定例 緑背景がv5.2.0での変更箇所
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script type="module" src="./index.js"></script>
</body>
</html>【変更履歴】
- 【v5.2.0】
- 設定方法がParcel2に対応
package.json の編集（Edit package.json）
package.json ファイルに dev と build の各スクリプトを追加する。
設定例 緑背景がv5.2.0での変更箇所
"scripts": {
"dev": "parcel ./src/index.html",
"prebuild": "npx rimraf build",
"build": "parcel build --public-url ./ ./src/index.html --dist-dir build"
}devスクリプトの実行（Run dev script）
アプリケーションには http://127.0.0.1:1234 からアクセスできる。
実行コマンド$ npm run dev
アプリケーションファイルの構築（Build app files）
構築されたファイルは build/ フォルダの中にある。
実行コマンド$ npm run build