ブートストラップとパーセル

Parcel を使用してプロジェクトに Bootstrap の CSS と JavaScript を含めてバンドルする方法の公式ガイド。

このページでは

最後までスキップしますか？このガイドのソースコードと動作するデモを twbs/examples リポジトリからダウンロードします。StackBlitz で例を開くこともできますが、Parcel は現在サポートされていないため実行できません。

設定

Bootstrap を使用してゼロから Parcel プロジェクトを構築しているため、実際に開始する前に、いくつかの前提条件と事前の手順があります。このガイドでは、Node.js がインストールされていて、ターミナルにある程度慣れている必要があります。

プロジェクトフォルダーを作成し、npm をセットアップします。フォルダーを作成my-projectし、引数を使用して npm を初期化して、-yすべての対話型の質問を避けるようにします。
```
mkdir my-project && cd my-project
npm init -y
```
パーセルをインストールします。Webpack ガイドとは異なり、ビルドツールの依存関係は 1 つだけです。Parcel は言語トランスフォーマー (Sass など) を検出すると自動的にインストールします。--save-devこの依存関係は開発用であり、本番用ではないことを示すために使用します。
```
npm i --save-dev parcel
```
ブートストラップをインストールします。これで、Bootstrap をインストールできます。ドロップダウン、ポップオーバー、およびツールチップの配置は Popper に依存しているため、Popper もインストールします。これらのコンポーネントを使用する予定がない場合は、ここで Popper を省略できます。
```
npm i --save bootstrap @popperjs/core
```

必要な依存関係がすべてインストールされたので、プロジェクトファイルの作成と Bootstrap のインポートに取り掛かることができます。

プロジェクトの構造

既にフォルダーを作成し、my-projectnpm を初期化しています。ここで、srcフォルダー、スタイルシート、および JavaScript ファイルも作成して、プロジェクト構造を完成させます。から次を実行するか、以下my-projectに示すフォルダとファイル構造を手動で作成します。

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss

完了すると、完全なプロジェクトは次のようになります。

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
└── package.json

この時点で、すべてが適切な場所にありますが、Parcel にはサーバーを起動するための HTML ページと npm スクリプトが必要です。

パーセルの構成

依存関係がインストールされ、プロジェクトフォルダーがコーディングを開始する準備ができたので、Parcel を構成してプロジェクトをローカルで実行できます。パーセル自体は設計上構成ファイルを必要としませんが、サーバーを起動するには npm スクリプトと HTML ファイルが必要です。

ファイルに入力しsrc/index.htmlます。Parcel にはレンダリングするページが必要なので、ページを使用しindex.htmlて CSS や JavaScript ファイルなどの基本的な HTML をセットアップします。
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>
```
Bootstrap の CSS が Webpack によって読み込まれるタイミングを確認できるように、 div class="container"and を使用してここに Bootstrap のスタイリングを少し含めています。<button>

Parcel は、Sass を使用していることを自動的に検出し、それをサポートするSass Parcel プラグインをインストールします。ただし、必要に応じて手動で実行することもできますnpm i --save-dev @parcel/transformer-sass。
パーセル npm スクリプトを追加します。を開き、次のスクリプトをオブジェクトpackage.jsonに追加します。このスクリプトを使用して、Parcel 開発サーバーを起動し、作成した HTML ファイルをディレクトリにコンパイルした後にレンダリングします。startscriptsdist
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
最後に、Parcel を開始します。ターミナルのmy-projectフォルダーから、新しく追加された npm スクリプトを実行します。
```
npm start
```

このガイドの次の最後のセクションでは、Bootstrap の CSS と JavaScript をすべてインポートします。

ブートストラップのインポート

styles.scssBootstrap を Parcel にインポートするには、に 1つ、に 1 つの 2 つのインポートが必要main.jsです。

Bootstrap の CSS をインポートします。に以下を追加してsrc/scss/styles.scss、Bootstrap のソース Sass をすべてインポートします。
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
必要に応じて、スタイルシートを個別にインポートすることもできます。詳細については、Sass インポートドキュメントを参照してください。
Bootstrap の JS をインポートします。に以下を追加してsrc/js/main.js、Bootstrap の JS をすべてインポートします。Popper は Bootstrap を通じて自動的にインポートされます。
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
バンドルのサイズを抑えるために、必要に応じて JavaScript プラグインを個別にインポートすることもできます。
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Bootstrap のプラグインの使用方法の詳細については、JavaScript ドキュメントをお読みください。
そして、あなたは完了です！🎉 Bootstrap のソース Sass と JS が完全に読み込まれると、ローカル開発サーバーは次のようになります。

これで、使用したい Bootstrap コンポーネントの追加を開始できます。追加のカスタム Sass を組み込み、Bootstrap の CSS と JS の必要な部分のみをインポートしてビルドを最適化する方法については、完全な Parcel サンプルプロジェクトを確認してください。

ここで何か間違っている、または古くなっていますか？GitHub で問題を開いてください。トラブルシューティングのヘルプが必要ですか? GitHub で検索するか、ディスカッションを開始します。