Skip to main content Skip to docs navigation

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

安装 Parcel

安装 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 文件中添加 devbuild 脚本。

"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