View on GitHub

Parcel

了解如何使用 Parcel 将 Bootstrap 添加到你的项目中。

On this page

安装 Parcel

安装 Bootstrap

利用 npm 将 Bootstrap 作为 Node.js 模块进行安装。

Bootstrap 依赖 Popper，需要在 peerDependencies 属性中指定该依赖项。这意味着你必须利用 npm install @popperjs/core 命令确保这两个模块都要添加到 package.json 中。

当全部安装之后，你的项目结构将如下所示：

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

导入（import）JavaScript 插件

在应用程序的入口点（通常是 src/index.js 文件）导入（import）Bootstrap 中的 JavaScript 插件。你可以在一个文件中导入（import）所有插件，也可以只导入（import）部分插件。

// 导入（import）所有插件
import * as bootstrap from 'bootstrap';

// 或者只导入（import）需要的插件
import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';

// 或者只导入（import）一个插件
import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';

导入（import） CSS

既要充分发挥 Bootstrap 的潜力，还要根据你的需求对其进行定制，请将 Bootstrap 的 Sass 源文件添加进你的项目的构建流程中。

创建自己的 scss/custom.scss 文件来导入（import）Bootstrap 的 Sass 源文件，然后根据需要覆盖 Bootstrap 内置的变量。

构建应用程序

在 </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"
}

运行 dev 脚本

你的应用程序就可以通过 http://127.0.0.1:1234 地址进行访问了。

npm run dev

构建组成应用程序的文件

生成的文件将位于 build/ 目录中。

npm run build