跳到主要內容 跳到文檔導航
Check
in English

引導程序和包裹

關於如何使用 Parcel 在您的項目中包含和捆綁 Bootstrap 的 CSS 和 JavaScript 的官方指南。

在本頁面
想跳到最後嗎?從twbs/examples 存儲庫下載本指南的源代碼和工作演示 。您也可以 在 StackBlitz 中打開示例但不運行它,因為 Parcel 目前不支持。

設置

我們正在從頭開始使用 Bootstrap 構建一個 Parcel 項目,因此在我們真正開始之前有一些先決條件和前期步驟。本指南要求您安裝 Node.js 並熟悉終端。

  1. 創建一個項目文件夾並設置 npm。我們將創建my-project文件夾並使用參數初始化 npm,-y以避免它向我們詢問所有交互式問題。

    mkdir my-project && cd my-project
    npm init -y
    
  2. 安裝包裹。與我們的 Webpack 指南不同,這裡只有一個構建工具依賴項。Parcel 會在檢測到它們時自動安裝語言轉換器(如 Sass)。我們--save-dev用來表示這種依賴關係僅用於開髮用途而不用於生產。

    npm i --save-dev parcel
    
  3. 安裝引導程序。現在我們可以安裝 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 文件來啟動我們的服務器。

  1. 填寫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.

  2. 添加 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"
       },
       // ...
    }
    
  3. 最後,我們可以啟動 Parcel。my-project終端的文件夾中,運行新添加的 npm 腳本:

    npm start
    
    Parcel 開發服務器正在運行

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

導入引導

將 Bootstrap 導入 Parcel 需要兩個導入,一個導入我們的styles.scss,一個導入我們的main.js.

  1. 導入 Bootstrap 的 CSS。添加以下內容以src/scss/styles.scss導入所有 Bootstrap 的源 Sass。

    // Import all of Bootstrap's CSS
    @import "~bootstrap/scss/bootstrap";
    

    如果需要,您也可以單獨導入我們的樣式表。閱讀我們的 Sass 導入文檔了解詳情。

  2. 導入 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 插件的更多信息。

  3. 你完成了!🎉 Bootstrap 的源代碼 Sass 和 JS 完全加載後,您的本地開發服務器現在應該如下所示。

    使用 Bootstrap 運行的 Parcel 開發服務器

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


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