View on GitHub

Parcel

學習如何在包含 Bootstrap 的專案中使用 Parcel。

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

立即上課去

On this page

安裝 Parcel

安裝 Parcel Bundler.

安裝 Bootstrap

使用 npm 安裝 bootstrap 為 Node.js 模組

Bootstrap 依賴在 peerDependencies 屬性中指定的 Popper。這表示你必須確保使用 npm install @popperjs/core 將它們都添加到 package.json 中。

全部完成後，您的專案結構將如下所示：

project-name/
├── build/
├── node_modules/
│   └── bootstrap/
│   └── popper.js/
├── scss/
│   └── custom.scss
├── src/
│   └── index.html
│   └── index.js
└── package.json

Importing JavaScript

在應用程式的入口點 (通常是 src/index.js) 中 import Bootstrap’s JavaScript。你可以在一個文件中 import 所有插件，如果只需要其中一個也可以單獨導入。

// Import all plugins
import * as bootstrap from 'bootstrap';

// Or import only needed plugins
import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';

// Or import just one
import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';

Importing CSS

要充分利用 Bootstrap 的潛力並根據您的需要對其自定義，請將原始檔作為你專案綑綁過程的一部分。

創建你自己的 scss/custom.scss 以導入 Bootstrap 的 Sass 檔案並且覆蓋內建的自定義變數.

Build app

在 </body> 結尾標籤之前載入 src/index.js。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

編輯 `package.json`

在 package.json 檔案中添加 dev 和 build 腳本。

"scripts": {
  "dev": "parcel ./src/index.html",
  "prebuild": "npx rimraf build",
  "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}

Run dev script

你的 app 可在 http://127.0.0.1:1234 訪問。

npm run dev

Build app files

建構的檔案位在 build/ 資料夾中。

npm run build