in English

引導程序和包裹

關於如何使用 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 指南不同，這裡只有一個構建工具依賴項。Parcel 會在檢測到它們時自動安裝語言轉換器（如 Sass）。我們--save-dev用來表示這種依賴關係僅用於開髮用途而不用於生產。
```
npm i --save-dev parcel
```
安裝引導程序。現在我們可以安裝 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 本身不需要配置文件，但我們確實需要一個 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>以便我們看到 Webpack 何時加載 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 導入 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 上搜索或發起討論。