引導程序和 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 指南不同，這裡只有一個構建工具依賴項。我們--save-dev用來表示這種依賴關係僅用於開髮用途而不用於生產。
```
npm i --save-dev vite
```
安裝引導程序。現在我們可以安裝 Bootstrap。我們還將安裝 Popper，因為我們的下拉菜單、彈出框和工具提示都依賴於它來定位。如果您不打算使用這些組件，則可以在此處省略 Popper。
```
npm i --save bootstrap @popperjs/core
```
安裝額外的依賴。除了 Vite 和 Bootstrap，我們還需要另一個依賴項（Sass）來正確導入和捆綁 Bootstrap 的 CSS。
```
npm i --save-dev sass
```

現在我們已經安裝和設置了所有必要的依賴項，我們可以開始創建項目文件並導入 Bootstrap。

項目結構

我們已經創建了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

安裝依賴項並準備好我們的項目文件夾供我們開始編碼後，我們現在可以配置 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。這是 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>
  </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 樣式div class="container"，<button>以便我們看到 Vite 何時加載 Bootstrap 的 CSS。

現在我們需要一個 npm 腳本來運行 Vite。打開package.json並添加start如下所示的腳本（您應該已經有了測試腳本）。我們將使用這個腳本來啟動我們的本地 Vite 開發服務器。
```
{
  // ...
  "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';
```
閱讀我們的 JavaScript 文檔，了解有關如何使用 Bootstrap 插件的更多信息。
你完成了！🎉 Bootstrap 的源代碼 Sass 和 JS 完全加載後，您的本地開發服務器現在應該如下所示。

現在您可以開始添加您想要使用的任何 Bootstrap 組件。請務必查看完整的 Vite 示例項目，了解如何通過僅導入您需要的 Bootstrap 的 CSS 和 JS 部分來包含額外的自定義 Sass 並優化您的構建。

在這裡看到錯誤或過時的東西？請在 GitHub 上打開一個問題。需要幫助進行故障排除？在 GitHub 上搜索或發起討論。