View on GitHub
Parcel
了解如何使用 Parcel 将 Bootstrap 添加到你的项目中。
On this page
安装 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
文件中添加 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