ブートストラップ & Vite

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

このページでは

最後までスキップしますか？このガイドのソースコードと動作するデモを twbs/examples リポジトリからダウンロードします。ライブ編集用に StackBlitz で例を開くこともできます。

設定

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

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

必要なすべての依存関係をインストールしてセットアップしたので、プロジェクトファイルの作成と 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 vite.config.js

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

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

この時点で、すべてが適切な場所にありますが、まだ入力していないため、Vite は機能しvite.config.jsません。

Vite を構成する

依存関係がインストールされ、プロジェクトフォルダーがコーディングを開始する準備ができたので、Vite を構成してプロジェクトをローカルで実行できます。

vite.config.jsエディターで開きます。空白なので、サーバーを起動できるようにボイラープレート構成を追加する必要があります。構成のこの部分は、Vite がプロジェクトの JavaScript を探し、開発サーバーがどのように動作するか (srcホットリロードでフォルダーからプル) を指示します。
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```

次に記入しsrc/index.htmlます。これは、後のステップで追加するバンドルされた CSS と JS を利用するために、Vite がブラウザにロードする HTML ページです。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>

Bootstrap の CSS が Vite によって読み込まれるタイミングを確認できるように、ここにdiv class="container"and を使用して Bootstrap のスタイリングを少し含めます。<button>

次に、Vite を実行するための npm スクリプトが必要です。以下に示すスクリプトを開いpackage.jsonて追加しstartます (テストスクリプトは既にあるはずです)。このスクリプトを使用して、ローカルの Vite dev サーバーを起動します。
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
最後に、Vite を起動します。ターミナルのmy-projectフォルダーから、新しく追加された npm スクリプトを実行します。
```
npm start
```

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

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

で Bootstrap の Sass インポートをセットアップしvite.config.jsます。これで構成ファイルが完成し、以下のスニペットと一致するはずです。ここでの唯一の新しい部分はresolveセクションです。これを使用して、内部のソースファイルにエイリアスを追加し、node_modulesインポートをできるだけシンプルに保ちます。
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}
```
では、Bootstrap の CSS をインポートしてみましょう。に以下を追加してsrc/scss/styles.scss、Bootstrap のソース Sass をすべてインポートします。
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
必要に応じて、スタイルシートを個別にインポートすることもできます。詳細については、Sass インポートドキュメントを参照してください。
次に CSS をロードし、Bootstrap の JavaScript をインポートします。以下をに追加してsrc/js/main.js、CSS をロードし、Bootstrap の JS をすべてインポートします。Popper は Bootstrap を通じて自動的にインポートされます。
```
// Import our custom CSS
import '../scss/styles.scss'

// 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 の必要な部分のみをインポートしてビルドを最適化する方法については、完全な Vite サンプルプロジェクトを確認してください。

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