阅读(1647)
赞(2)
Bootstrap5 Parcel
2021-08-30 16:50:01 更新
了解如何在你的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
导入 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 文件，然后覆盖内置的自定义变量。
构建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"
}
运行dev脚本
您的应用程序将运行在http://127.0.0.1:1234。
npm run dev
构建应用程序文件
构建的文件在build/文件夹中。
npm run build