メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
Check

Parcel v5.0.0-beta3新設

Parcelを使用してプロジェクトにBootstrapを組み込む方法を学習する。

※v5.2.0-beta1はプレリリースのため、"v5.2.0"での変更は再変更される可能性があります。

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.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)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 ファイルに devbuild の各スクリプトを追加する。

設定例 緑背景が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