构建工具
了解如何使用 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 以查看所有可用的命令。 包含的的主要命令如下：
| 命令 | 描述 |
|---|---|
npm start
|
编译 CSS 和 JavaScript 源码、构建文档并启动一个本地服务器运行文档网站。 |
npm run dist
|
创建 dist/ 目录并将编译后的文件放置于此目录中。用到了 Sass、Autoprefixer 和 terser 工具。
|
npm test
|
运行 npm run dist 命令之后在本地运行测试程序
|
npm run docs-serve
|
在本地构建并启动文档网站。 |
Sass
Bootstrap 使用 Dart Sass 将 Sass 源文件编译为 CSS 文件（已包含在我们的构建流程中了），如果你需要自己编译 Sass 源码的话，我们建议您使用相同的工具。我们在先前的 Bootstrap v4 版本中使用的是 Node Sass 工具，但是现在包括 LibSass 及构建在 LibSass 上的工具（包括 Node Sass）已经被 Sass 官方标记为 不推荐使用 了。
Dart Sass 对浮点数的舍入精度为 10，并且出于运行效率的考虑，不允许对此值进行调整。对于生成的 CSS，我们不会在后续的处理过程中降低此精度（例如压缩时），但是如果你选择降低精度的话，我们建议至少保持在 6，以避免浏览器的舍入问题。
Autoprefixer
Bootstrap 使用 Autoprefixer （已包含在我们的构建流程中了）工具在构建时自动将特定于厂商的属性前缀添加到某些 CSS 属性前。对于 CSS 的关键部分，此工具可以让我们只需要编写一次然后由自动添加，并且避免了像 Bootstrap v3 版本中那样手动添加带有特定于厂商前缀的 CSS 属性，这样就节省我们的时间并减少了代码量。
我们将需要 Autoprefixer 支持的浏览器列表保存在一个单独的文件中，并提交到 GitHub 仓库中进行管理。有关详细信息，请参见 .browserslistrc。
RTLCSS
Bootstrap 使用 RTLCSS 工具处理编译后的 CSS 并将其转换为支持 RTL（基本上就是将有关横坐标轴方向的属性，例如 padding-left，修改为相反的方向）。这样我们就只需要编写一次 CSS，然后使用 RTLCSS 并微调 control 和 value 指令就全部搞定了。
在本地启动文档网站
在本地启动文档网站需要用到 Hugo 工具，它是通过 hugo-bin 这个 npm 软件包安装到本地的。Hugo 是一个快速且可扩展的静态站点生成器，它为我们提供的基本功能包括：文件包含、编译 Markdown 文件、模板等。以下是 Hugo 的用法：
- 参照上面的 安装工具 章节的说明安装所有依赖项。
- 进入根目录
/bootstrap，运行npm run docs-serve命令。 - 在浏览器中输入
http://localhost:9001/网址，然后就能看到文档网站的内容了。
如需了解更多关于 Hugo 的信息，请参阅其 文档。
故障排除
如果你在安装依赖项时遇到了问题，请卸载所有先前安装的依赖项及其各个版本（包括全局和本地）。然后，重新运行 npm install。