本篇教程将详细介绍如何使用 Bootstrap 自带的 npm 脚本来构建文档、编译源码、运行测试等。
一、安装工具
Bootstrap 的构建系统由 npm 脚本 组成的。 其自带的 package.json 文件提供了便捷的途径来编译代码、运行测试等。
无论是使用 Bootstrap 自带的构建系统还是在本地启动文档网站，都需要下载 Bootstrap 源码并安装 Node。请按照以下步骤操作并搭建本地运行环境：
1、下载并安装Node.js，Node.js自带了用于管理依赖项的工具npm；
2、下载Bootstrap的源码或者通过克隆Bootstrap的源码仓库来获取到本地；
3、在源码的根目录/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文件，而不再推荐使用Node Sass或LibSass。Dart Sass对浮点数的舍入精度为10，并且出于运行效率的考虑，不允许对此值进行调整。
在生成的CSS中，Bootstrap不会在后续的处理过程中降低这种精度（例如在压缩时）。然而，如果您选择降低精度，Bootstrap建议至少保持在6，以避免浏览器可能出现的舍入问题。因此，如果您需要自己编译Sass源码，Bootstrap建议您也使用Dart Sass，并注意保持适当的精度以确保最终生成的CSS的准确性。
四、Autoprefixer
Bootstrap使用Autoprefixer工具在构建时自动向部分CSS属性添加特定于厂商的前缀。这一工具使得我们只需编写一次CSS代码，就能够自动添加特定前缀，避免了像Bootstrap v3版本中那样需要手动添加带有特定前缀的CSS属性，从而节省了时间并减少了代码量。
为了支持Autoprefixer，我们将浏览器列表保存在一个单独的文件中，并将其提交到GitHub仓库进行管理。这样做有助于确保Autoprefixer能够根据最新的浏览器标准来添加相应的前缀，从而确保生成的CSS能够在不同的浏览器中获得良好的兼容性。
五、RTLCSS
Bootstrap使用RTLCSS工具处理编译后的CSS，将其转换为支持RTL（右到左）语言阅读方向的样式表。通过使用RTLCSS，我们只需编写一次CSS，然后通过微调控制和数值指令，即可快速简便地完成RTL样式的处理。这样就大大减少了工作量，同时确保网站在从左到右和从右到左的语言环境中都能够呈现良好的视觉效果。
六、本地启动文档网站
为了在本地启动文档网站，需要使用Hugo工具。Hugo是一个快速且可扩展的静态站点生成器，提供文件包含、Markdown文件编译、模板等基本功能。
首先，根据上面提到的安装工具的说明，安装所有Hugo所需的依赖项。然后，进入根目录/bootstrap，并执行npm run docs-serve命令。接下来，在浏览器中输入http://localhost:9001/，就可以查看文档网站的内容了。这样能够快速方便地在本地预览文档网站的效果。
七、故障排除
如果在安装依赖项时遇到了问题，请按照以下步骤操作：
1、卸载所有先前安装的依赖项及其各个版本，包括全局和本地安装的依赖项；
2、重新运行npm install命令以确保依赖项能够正确安装。
这样做有助于解决可能出现的依赖项安装问题，并能够确保Hugo工具能够正常运行。
