Bootstrap 和 Parcel

使用 Parcel 在專案中包含並打包 Bootstrap 的 CSS 和 JavaScript 的官方指南。

在此頁面上

想要跳到最後？從 twbs/examples 儲存庫下載此指南的原始碼和工作示範。您也可以在 StackBlitz 中開啟範例，但無法執行，因為 Parcel 目前不支援該功能。

設定

我們從頭開始使用 Bootstrap 建立 Parcel 專案，因此在我們真正開始之前，有一些先決條件和前期步驟。此指南需要您已安裝 Node.js，並且熟悉終端機。

建立專案資料夾並設定 npm。我們將建立 `my-project` 資料夾，並使用 `-y` 參數初始化 npm，以避免它詢問我們所有互動式問題。
```
mkdir my-project && cd my-project
npm init -y
```
安裝 Parcel。與我們的 Webpack 指南不同，這裡只有一個單一的建置工具相依性。Parcel 會在偵測到語言轉換器（例如 Sass）時自動安裝它們。我們使用 `--save-dev` 來表示這個相依性僅供開發使用，而非生產使用。
```
npm i --save-dev parcel
```
安裝 Bootstrap。現在我們可以安裝 Bootstrap。由於我們的下拉選單、彈出框和工具提示依賴它進行定位，因此我們也會安裝 Popper。如果您不打算使用這些元件，您可以在這裡省略 Popper。
```
npm i --save bootstrap @popperjs/core
```

現在我們已經安裝所有必要的相依性，我們可以開始建立專案檔案和匯入 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

完成後，您的完整專案應如下所示

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

在這個時間點，所有內容都放在正確的位置，但 Parcel 需要一個 HTML 頁面和 npm 指令碼來啟動我們的伺服器。

設定 Parcel

在安裝相依性且我們的專案資料夾已準備好讓我們開始編寫程式碼後，我們現在可以設定 Parcel 並在本地端執行我們的專案。Parcel 本身不需要設定檔，但我們確實需要一個 npm 指令碼和一個 HTML 檔案來啟動我們的伺服器。

填入 src/index.html 檔案。Parcel 需要一個要呈現的頁面，因此我們使用我們的 `index.html` 頁面來設定一些基本的 HTML，包括我們的 CSS 和 JavaScript 檔案。

<!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 造型，使用 div class="container" 和 <button>，以便我們在 Parcel 載入 Bootstrap 的 CSS 時可以看到。

Parcel 會自動偵測我們正在使用 Sass，並安裝 Sass Parcel 外掛程式以提供支援。不過，如果你願意，也可以手動執行 npm i --save-dev @parcel/transformer-sass。

新增 Parcel npm 指令碼。開啟 package.json，並將下列 start 指令碼新增到 scripts 物件。我們將使用此指令碼啟動 Parcel 開發伺服器，並在編譯至 dist 目錄後呈現我們建立的 HTML 檔案。
```
{
   // ...
   "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。

匯入 Bootstrap

要將 Bootstrap 匯入 Parcel，需要兩個匯入，一個匯入至我們的 styles.scss，另一個匯入至我們的 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'
```
閱讀我們的 JavaScript 文件以取得有關如何使用 Bootstrap 外掛程式的更多資訊。
大功告成！🎉Bootstrap 的原始 Sass 和 JS 已完全載入，您的本機開發伺服器現在應如下所示

現在，您可以開始新增任何您想使用的 Bootstrap 元件。務必查看完整的 Parcel 範例專案，了解如何包含其他自訂 Sass，並只匯入您需要的 Bootstrap CSS 和 JS 部分，以最佳化您的建置。

發現這裡有錯誤或過時資訊嗎？請在 GitHub 上開啟問題。需要疑難排解協助嗎？在 GitHub 上搜尋或開始討論。