构建工具
了解如何使用 Bootstrap 附带的 npm 脚本构建我们的文档、编译源代码、运行测试等。
工具设置
Bootstrap 使用 npm 脚本 作为其构建系统。我们的 package.json 包含用于处理框架的便捷方法，包括编译代码、运行测试等。
要使用我们的构建系统并在本地运行我们的文档，您需要一份 Bootstrap 源文件和 Node 的副本。按照以下步骤操作，您应该可以开始使用了
- 下载并安装 Node.js，我们用它来管理我们的依赖项。
- 下载 Bootstrap 源文件 或 fork Bootstrap 存储库。
- 导航到根目录
/bootstrap并运行npm install以安装我们在 package.json 中列出的本地依赖项。
完成后，您将能够从命令行运行提供的各种命令。
使用 npm 脚本
我们的 package.json 包含以下命令和任务
| 任务 | 说明 |
|---|---|
npm run dist |
npm run dist 使用编译文件创建 /dist/ 目录。使用 Sass、Autoprefixer 和 terser。 |
npm test |
在运行 npm run dist 之后在本地运行测试 |
npm run docs-serve |
在本地构建并运行文档。 |
运行 npm run 以查看所有 npm 脚本。
Sass
Bootstrap v4 使用 Node Sass 将我们的 Sass 源文件编译成 CSS 文件（包含在我们的构建过程中）。为了在使用自己的资产管道编译 Sass 时获得相同的生成 CSS，您需要使用至少支持 Node Sass 所支持功能的 Sass 编译器。这一点很重要，因为截至 2020 年 10 月 26 日，LibSass 及其之上构建的包（包括 Node Sass）已 弃用。
如果您需要更新的 Sass 功能或与更新的 CSS 标准兼容，则 Dart Sass 现在是 Sass 的主要实现，并支持与 Node Sass 完全兼容的 JavaScript API（Dart Sass 的 GitHub 页面 上列出了一些例外）。
我们将 Sass 舍入精度提高到 6（默认情况下，Node Sass 中为 5），以防止浏览器舍入问题。如果您使用 Dart Sass，则无需调整此项，因为该编译器使用 10 的舍入精度，并且出于效率原因不允许调整。
Autoprefixer
Bootstrap 使用 Autoprefixer（包含在我们的构建过程中）在构建时自动向某些 CSS 属性添加供应商前缀。这样做通过允许我们一次编写 CSS 的关键部分，同时无需使用 v3 中类似的供应商 mixin，从而节省了我们的时间和代码。
我们在 GitHub 存储库中的一个单独文件中维护通过 Autoprefixer 支持的浏览器列表。有关详细信息，请参阅 .browserslistrc。
本地文档
在本地运行我们的文档需要使用 Hugo，它通过 hugo-bin npm 包进行安装。Hugo 是一个极速且可扩展的静态网站生成器，为我们提供：基本包含、基于 Markdown 的文件、模板等。以下是开始使用它的方法
- 运行上述工具设置以安装所有依赖项。
- 从根目录
/bootstrap中，在命令行中运行npm run docs-serve。 - 在浏览器中打开
http://localhost:9001/，就可以了。
阅读其文档，了解有关使用 Hugo 的更多信息。
故障排除
如果您在安装依赖项时遇到问题，请卸载所有以前的依赖项版本（全局和本地）。然后，重新运行npm install。