構(gòu)建工具
了解如何使用 Bootstrap 自帶的 npm 腳本來構(gòu)建文檔、編譯源碼、運(yùn)行測(cè)試等。
安裝工具
Bootstrap 的構(gòu)建系統(tǒng)由 npm 腳本 組成的。 其自帶的 package.json 文件提供了便捷的途徑來編譯代碼、運(yùn)行測(cè)試等。
無論是使用 Bootstrap 自帶的構(gòu)建系統(tǒng)還是在本地啟動(dòng)文檔網(wǎng)站，都需要下載 Bootstrap 源碼并安裝 Node。請(qǐng)按照以下步驟操作并搭建本地運(yùn)行環(huán)境：
- 下載并安裝 Node.js，其自帶了我們用于管理依賴項(xiàng)的工具。
- 下載 Bootstrap 的源碼 或克隆 Bootstrap 的源碼倉(cāng)庫(kù) 到本地。
- 進(jìn)入源碼的根目錄
/bootstrap并運(yùn)行npm install以安裝 package.json 文件中列出的所有依賴項(xiàng)到本地。
上述步驟完成后，你就可以運(yùn)行 Bootstrap 所提供的各個(gè)命令了。
使用 npm 腳本
Bootstrap 自帶的 package.json 文件包含了用于項(xiàng)目本身開發(fā)所需的許多命令。運(yùn)行 npm run 以查看所有可用的命令。 包含的的主要命令如下：
| 命令 | 描述 |
|---|---|
npm start
|
編譯 CSS 和 JavaScript 源碼、構(gòu)建文檔并啟動(dòng)一個(gè)本地服務(wù)器運(yùn)行文檔網(wǎng)站。 |
npm run dist
|
創(chuàng)建 dist/ 目錄并將編譯后的文件放置于此目錄中。用到了 Sass、Autoprefixer 和 terser 工具。
|
npm test
|
運(yùn)行 npm run dist 命令之后在本地運(yùn)行測(cè)試程序
|
npm run docs-serve
|
在本地構(gòu)建并啟動(dòng)文檔網(wǎng)站。 |
Sass
Bootstrap 使用 Dart Sass 將 Sass 源文件編譯為 CSS 文件（已包含在我們的構(gòu)建流程中了），如果你需要自己編譯 Sass 源碼的話，我們建議您使用相同的工具。我們?cè)谙惹暗?Bootstrap v4 版本中使用的是 Node Sass 工具，但是現(xiàn)在包括 LibSass 及構(gòu)建在 LibSass 上的工具（包括 Node Sass）已經(jīng)被 Sass 官方標(biāo)記為 不推薦使用 了。
Dart Sass 對(duì)浮點(diǎn)數(shù)的舍入精度為 10，并且出于運(yùn)行效率的考慮，不允許對(duì)此值進(jìn)行調(diào)整。對(duì)于生成的 CSS，我們不會(huì)在后續(xù)的處理過程中降低此精度（例如壓縮時(shí)），但是如果你選擇降低精度的話，我們建議至少保持在 6，以避免瀏覽器的舍入問題。
Autoprefixer
Bootstrap 使用 Autoprefixer （已包含在我們的構(gòu)建流程中了）工具在構(gòu)建時(shí)自動(dòng)將特定于廠商的屬性前綴添加到某些 CSS 屬性前。對(duì)于 CSS 的關(guān)鍵部分，此工具可以讓我們只需要編寫一次然后由自動(dòng)添加，并且避免了像 Bootstrap v3 版本中那樣手動(dòng)添加帶有特定于廠商前綴的 CSS 屬性，這樣就節(jié)省我們的時(shí)間并減少了代碼量。
我們將需要 Autoprefixer 支持的瀏覽器列表保存在一個(gè)單獨(dú)的文件中，并提交到 GitHub 倉(cāng)庫(kù)中進(jìn)行管理。有關(guān)詳細(xì)信息，請(qǐng)參見 .browserslistrc。
RTLCSS
Bootstrap 使用 RTLCSS 工具處理編譯后的 CSS 并將其轉(zhuǎn)換為支持 RTL（基本上就是將有關(guān)橫坐標(biāo)軸方向的屬性，例如 padding-left，修改為相反的方向）。這樣我們就只需要編寫一次 CSS，然后使用 RTLCSS 并微調(diào) control 和 value 指令就全部搞定了。
在本地啟動(dòng)文檔網(wǎng)站
在本地啟動(dòng)文檔網(wǎng)站需要用到 Hugo 工具，它是通過 hugo-bin 這個(gè) npm 軟件包安裝到本地的。Hugo 是一個(gè)快速且可擴(kuò)展的靜態(tài)站點(diǎn)生成器，它為我們提供的基本功能包括：文件包含、編譯 Markdown 文件、模板等。以下是 Hugo 的用法：
- 參照上面的 安裝工具 章節(jié)的說明安裝所有依賴項(xiàng)。
- 進(jìn)入根目錄
/bootstrap，運(yùn)行npm run docs-serve命令。 - 在瀏覽器中輸入
http://localhost:9001/網(wǎng)址，然后就能看到文檔網(wǎng)站的內(nèi)容了。
如需了解更多關(guān)于 Hugo 的信息，請(qǐng)參閱其 文檔。
故障排除
如果你在安裝依賴項(xiàng)時(shí)遇到了問題，請(qǐng)卸載所有先前安裝的依賴項(xiàng)及其各個(gè)版本（包括全局和本地）。然后，重新運(yùn)行 npm install。