構建工具
了解如何使用 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。