Bootstrap & Parcel
了解在你的含Bootstrap项目中 如何使用Parcel。
![](/manual/bootstrap5/zh//docs/5.3/assets/img/guides/bootstrap-parcel.png)
安装 Parcel
我们要从头开始构建一个使用 Bootstrap 的 Parcel 项目,因此在真正开始之前需要一些先决条件和前期步骤。本指南要求您安装 Node.js,并熟悉使用终端。
-
创建项目文件夹并设置 npm。 我们将创建 “my-project ”文件夹,并使用“-y ”参数初始化 npm,以避免它询问我们所有交互式问题。
mkdir my-project && cd my-project npm init -y
-
安装 Parcel。 与我们的 Webpack 指南不同,这里只依赖一个构建工具。Parcel 会在检测到语言转换器(如 Sass)时自动安装它们。我们使用“-save-dev”(保存-dev)来表示该依赖关系仅供开发使用,不用于生产。
npm i --save-dev parcel
-
现在我们可以安装 Bootstrap。 我们还将安装 Popper,因为下拉菜单、弹出窗口和工具提示的定位都依赖于它。如果不打算使用这些组件,可以省略 Popper。
npm i --save bootstrap @popperjs/core
现在我们已经安装了所有必要的依赖项,可以开始创建项目文件和导入 Bootstrap 了。
项目结构
我们已经创建了 my-project
文件夹并初始化了 npm。现在,我们还要创建 src
文件夹、样式表和 JavaScript 文件,以完善项目结构。在 my-project
中运行以下内容,或手动创建下图所示的文件夹和文件结构。
mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss
完成后,您的完整项目应该是这样的:
my-project/
├── src/
│ ├── js/
│ │ └── main.js
│ ├── scss/
│ │ └── styles.scss
│ └── index.html
├── package-lock.json
└── package.json
此时,一切都已就绪,但 Parcel 还需要一个 HTML 页面和 npm 脚本来启动我们的服务器。
配置 Parcel
安装好依赖项,项目文件夹也准备就绪,我们就可以开始编码了,现在我们可以配置 Parcel 并在本地运行我们的项目。Parcel 本身不需要任何配置文件,但我们确实需要一个 npm 脚本和一个 HTML 文件来启动服务器。
-
填入
src/index.html
文件。 Parcel 需要一个页面来渲染,因此我们使用index.html
页面来设置一些基本的 HTML,包括 CSS 和 JavaScript 文件。<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap w/ Parcel</title> <link rel="stylesheet" href="scss/styles.scss"> <script type="module" src="js/main.js"></script> </head> <body> <div class="container py-4 px-3 mx-auto"> <h1>Hello, Bootstrap and Parcel!</h1> <button class="btn btn-primary">Primary button</button> </div> </body> </html>
我们在
div class=“container”
和<button>
中加入了一点 Bootstrap 风格,这样我们就能看到 Parcel 加载 Bootstrap CSS 的时间。Parcel 会自动检测到我们正在使用 Sass,并安装 Sass Parcel 插件 以支持它。不过,如果你愿意,也可以手动运行
npm i --save-dev @parcel/transformer-sass
。 -
添加 Parcel npm 脚本。 打开
package.json
,在scripts
对象中添加以下start
脚本。我们将使用该脚本启动 Parcel 开发服务器,并在编译到dist
目录后渲染我们创建的 HTML 文件。{ // ... "scripts": { "start": "parcel serve src/index.html --public-url / --dist-dir dist", "test": "echo \"Error: no test specified\" && exit 1" }, // ... }
-
最后,我们可以启动 Parcel。 在终端的
my-project
文件夹中,运行新添加的 npm 脚本:npm start
在本指南的下一部分,也是最后一部分,我们将导入 Bootstrap 的所有 CSS 和 JavaScript。
导入 Bootstrap
将 Bootstrap 导入 Parcel 需要两次导入,一次导入到我们的 styles.scss
中,另一次导入到我们的 main.js
中。
-
导入 Bootstrap 的 CSS。 在
src/scss/styles.scss
中添加以下内容,以导入 Bootstrap 的所有 Sass 源代码。// 导入 Bootstrap 的所有 CSS @import "bootstrap/scss/bootstrap";
如果你愿意,也可以单独导入我们的样式表。详情请阅读我们的 Sass 导入文档。
-
导入 Bootstrap 的 JS. 在
src/js/main.js
中添加以下内容,以导入所有 Bootstrap 的 JS。Popper将通过Bootstrap自动导入。// 导入 Bootstrap 的所有 JS import * as bootstrap from 'bootstrap'
您还可以根据需要单独导入 JavaScript 插件,以减小捆绑包的大小:
import Alert from 'bootstrap/js/dist/alert' // 或者,指定您需要的插件: import { Tooltip, Toast, Popover } from 'bootstrap'
阅读 JavaScript 文档 获取更多有关如何使用 Bootstrap 插件的信息。
-
完成! 随着 Bootstrap 源代码 Sass 和 JS 的完全加载,您的本地开发服务器现在应该是这样的:
现在,您可以开始添加任何想要使用的 Bootstrap 组件了。请务必查看完整的 Parcel 示例项目,了解如何通过只导入您需要的 Bootstrap CSS 和 JS 部分来包含额外的自定义 Sass 并优化您的构建。
See something wrong or out of date here? Please open an issue on GitHub. Need help troubleshooting? Search or start a discussion on GitHub.