构建工具
了解如何使用 Bootstrap 自带的 npm 脚本来构建文档、编译源码、运行测试等。
安装工具
Bootstrap 的构建系统由 npm 脚本 组成的。 其自带的 package.json 文件提供了便捷的途径来编译代码、运行测试等。
无论是使用 Bootstrap 自带的构建系统还是在本地启动文档网站，都需要下载 Bootstrap 源码并安装 Node。请按照以下步骤操作并搭建本地运行环境：
- 下载并安装 Node.js，其自带了我们用于管理依赖项的工具。
- 下载 Bootstrap 的源码 或克隆 Bootstrap 的源码仓库 到本地。
- 进入源码的根目录
/bootstrap并运行npm install以安装 package.json 文件中列出的所有依赖项到本地。
上述步骤完成后，你就可以运行 Bootstrap 所提供的各个命令了。
使用 npm 脚本
Bootstrap 自带的 package.json 文件提供了如下所列出的命令：
| 命令 | 描述 |
|---|---|
npm run dist |
npm run dist 命令用于创建 /dist/ 目录并将编译后的文件放置于此目录中。用到了 Sass、Autoprefixer 和 terser 工具。 |
npm test |
运行 npm run dist 命令之后在本地运行测试程序 |
npm run docs-serve |
在本地构建并启动文档网站。 |
运行 npm run 列出所有可用的 npm 命令或脚本。to see all the npm scripts.
Sass
Bootstrap v4 版本使用 Node Sass 工具将 Sass 源码文件编译为 CSS 文件（已包含在我们的构建流程中了）。如果你需要自己编译 Sass 源码的话，为了保证最终生成的 CSS 与官方保持一致，你所使用的 Sass 编译器至少要支持 Node Sass 所支持的所有功能。特别需要注意的是，自 2020 年 10 月 26 日起，LibSass 及构建在 LibSass 上的所有软件包（包括 Node Sass）都已被 Sass 官方标记为 不推荐使用 了。
如果你需要新的 Sass 功能或与新的 CSS 标准相兼容，Dart Sass 现在是 Sass 的主要实现，并支持与 Node Sass 完全兼容的 JavaScript API （有几个例外，请去 Dart Sass 的 GitHub page 页面上查看）。
我们将 Sass 编译器对浮点数的舍入精度提高到了 6 （在 Node Sass 中默认是 5 ），以避免浏览器的舍入问题。如果你使用的是 Dart Sass，则无需进行调整，因为该编译器设置的舍入精度为 10，并且出于执行效率的考虑，不允许对此数值进行调整。
Autoprefixer
Bootstrap 使用 Autoprefixer （已包含在我们的构建流程中了）工具在构建时自动将特定于厂商的属性前缀添加到某些 CSS 属性前。对于 CSS 的关键部分，此工具可以让我们只需要编写一次然后由自动添加，并且避免了像 Bootstrap v3 版本中那样手动添加带有特定于厂商前缀的 CSS 属性，这样就节省我们的时间并减少了代码量。
我们将需要 Autoprefixer 支持的浏览器列表保存在一个单独的文件中，并提交到 GitHub 仓库中进行管理。有关详细信息，请参见 .browserslistrc。
在本地启动文档网站
在本地启动文档网站需要用到 Hugo 工具，它是通过 hugo-bin 这个 npm 软件包安装到本地的。Hugo 是一个快速且可扩展的静态站点生成器，它为我们提供的基本功能包括：文件包含、编译 Markdown 文件、模板等。以下是 Hugo 的用法：
- 参照上面的 安装工具 章节的说明安装所有依赖项。
- 进入根目录
/bootstrap，运行npm run docs-serve命令。 - 在浏览器中输入
http://localhost:9001/网址，然后就能看到文档网站的内容了。
如需了解更多关于 Hugo 的信息，请参阅其 文档。
故障排除
如果你在安装依赖项时遇到了问题，请卸载所有先前安装的依赖项及其各个版本（包括全局和本地）。然后，重新运行 npm install。