Bootstrap 與 Vite

如何在專案中使用 Vite 引入和打包 Bootstrap 的 CSS 和 JavaScript 的官方指南。

本頁內容

想直接跳到最後？ 從 twbs/examples 儲存庫下載本指南的原始碼和實際範例。您也可以在 StackBlitz 中開啟此範例進行即時編輯。

什麼是 Vite？（What is Vite?）

Vite 是一個專為速度和簡潔設計的現代前端建置工具。它提供高效且精簡的開發體驗，特別適合現代 JavaScript 框架。

設定（Setup）

我們從零開始建構一個使用 Bootstrap 的 Vite 專案，因此在我們真正開始之前有一些先決條件和前置步驟。本指南要求您已安裝 Node.js 並對終端機有一定的熟悉度。

建立專案資料夾並設定 npm。 我們將建立 my-project 資料夾並使用 -y 參數初始化 npm，以避免它詢問我們所有的互動式問題。
```
mkdir my-project && cd my-project
npm init -y
```
安裝 Vite。 與我們的 Webpack 指南不同，這裡只有一個建置工具相依套件。我們使用 --save-dev 來表示此相依套件僅用於開發用途而非正式環境。
```
npm i --save-dev vite
```
安裝 Bootstrap。 現在我們可以安裝 Bootstrap。我們還會安裝 Popper，因為我們的下拉選單、彈出提示框和工具提示框依賴它進行定位。如果您不打算使用這些元件，可以在此省略 Popper。
```
npm i --save bootstrap @popperjs/core
```
安裝額外的相依套件。 除了 Vite 和 Bootstrap 之外，我們還需要另一個相依套件（Sass）來正確引入和打包 Bootstrap 的 CSS。
```
npm i --save-dev sass
```

現在我們已經安裝並設定好所有必要的相依套件，我們可以開始建立專案檔案並引入 Bootstrap。

專案結構（Project structure）

我們已經建立了 my-project 資料夾並初始化了 npm。現在我們還要建立 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（Configure Vite）

安裝好相依套件並且專案資料夾準備好讓我們開始編碼後，我們現在可以設定 Vite 並在本地執行專案。

在編輯器中開啟 vite.config.js。 由於它是空的，我們需要加入一些基本設定才能啟動伺服器。這部分設定告訴 Vite 在哪裡尋找我們專案的 JavaScript，以及開發伺服器應該如何運作（從 src 資料夾拉取並啟用熱重載）。

import { resolve } from 'path'

export default {
  root: resolve(__dirname, 'src'),
  build: {
    outDir: '../dist'
  },
  server: {
    port: 8080
  },
  // 可選：靜音 Sass 棄用警告。請參閱下方說明。
  css: {
     preprocessorOptions: {
        scss: {
          silenceDeprecations: [
            'import',
            'mixed-decls',
            'color-functions',
            'global-builtin',
          ],
        },
     },
  },
}

注意： 使用最新版本的 Dart Sass 編譯原始 Sass 檔案時會顯示 Sass 棄用警告。這不會阻止編譯或使用 Bootstrap。我們正在研究長期解決方案，在此期間可以忽略這些棄用通知。

接下來我們填寫 src/index.html。 這是 Vite 將在瀏覽器中載入的 HTML 頁面，用於使用我們將在後續步驟中加入的打包 CSS 和 JS。

<!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>
    <script type="module" src="./js/main.js"></script>
  </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>
  </body>
</html>

我們在這裡加入了一些 Bootstrap 樣式，包括 div class="container" 和 <button>，這樣我們可以看到 Vite 何時載入了 Bootstrap 的 CSS。

現在我們需要一個 npm 腳本來執行 Vite。 開啟 package.json 並加入如下所示的 start 腳本（您應該已經有 test 腳本）。我們將使用此腳本來啟動本地 Vite 開發伺服器。
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
最後，我們可以啟動 Vite。 從終端機中的 my-project 資料夾執行新加入的 npm 腳本：
```
npm start
```

在本指南的下一個也是最後一個部分，我們將引入所有 Bootstrap 的 CSS 和 JavaScript。

引入 Bootstrap（Import Bootstrap）

引入 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';
```
閱讀我們的 JavaScript 文件以了解更多關於如何使用 Bootstrap 外掛的資訊。
完成了！🎉 在完全載入 Bootstrap 的原始 Sass 和 JS 後，您的本地開發伺服器現在應該看起來像這樣：

現在您可以開始加入您想使用的任何 Bootstrap 元件。請務必查看完整的 Vite 範例專案，了解如何引入額外的自訂 Sass 並透過只引入您需要的 Bootstrap CSS 和 JS 部分來最佳化您的建置。

發現這裡有錯誤或過時的內容嗎？請在 GitHub 上開啟 issue。需要疑難排解協助嗎？請在 GitHub 上搜尋或發起討論。