in English
包裹
了解如何使用 Parcel 在您的项目中包含 Bootstrap。
在本页面
安装包裹
安装包裹捆绑器。
安装引导程序
使用 npm将 bootstrap 安装为 Node.js 模块。
Bootstrap 依赖于属性中指定的Popper 。peerDependencies
这意味着您必须确保将它们都添加到您的package.json
using 中npm install @popperjs/core
。
全部完成后,您的项目结构如下:
project-name/
├── build/
├── node_modules/
│ └── bootstrap/
│ └── popper.js/
├── scss/
│ └── custom.scss
├── src/
│ └── index.html
│ └── index.js
└── package.json
导入 JavaScript
在应用的入口点(通常是)中导入Bootstrap 的 JavaScript 。src/index.js
如果您只需要其中的一个子集,您可以将我们所有的插件导入一个文件或单独导入。
// 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';
导入 CSS
要充分利用 Bootstrap 的潜力并根据您的需要对其进行自定义,请将源文件用作项目捆绑过程的一部分。
创建自己的scss/custom.scss
来导入 Bootstrap 的 Sass 文件,然后覆盖内置的自定义变量。
构建应用
包括src/index.js
在结束</body>
标记之前。
<!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
在文件中添加dev
和脚本。build
package.json
"scripts": {
"dev": "parcel ./src/index.html",
"prebuild": "npx rimraf build",
"build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}
运行开发脚本
您的应用程序将可在 访问http://127.0.0.1:1234
。
npm run dev
构建应用程序文件
构建的文件在build/
文件夹中。
npm run build