翻譯自:https://github.com/dojo/framework/blob/master/docs/en/building/introduction.md
Dojo 提供了一套強大的命令行工具,讓構建現代應用程序更加簡單。
可以自動創(chuàng)建包(Bundle),可以使用 PWA 在本地緩存文件,可以在構建階段渲染初始的 HTML 和 CSS,也可以使用 Dojo 的 CLI 工具和 .dojorc 配置文件按條件忽略一些代碼?;蛘呙撾x(eject) Dojo 的構建工具,直接使用底層的構建工具以做到完全掌控。
| 功能 | 描述 |
|---|---|
| Dojo CLI | 模塊化的命令行工具,用于快速啟動新的應用程序、創(chuàng)建部件和運行測試等。 |
| 開發(fā)服務器 | 開發(fā)時使用的本地 web 服務器,用于監(jiān)聽文件系統(tǒng),當檢測到變化時會自動重新構建。也支持 HTTPS 和設置代理。 |
| 包(bundle) | 通過減少用戶需要下載的內容和優(yōu)化用戶實際需要的應用程序交互時間(Time-to-Interactive)以提高用戶體驗??梢愿鶕酚勺詣觿?chuàng)建包,或者在配置文件中明確定義包。 |
| 按條件納入代碼 | 通過 .dojorc 配置文件可以靜態(tài)方式關閉或打開使用 dojo/has 定義的功能。由于這些配置而無法訪問到的代碼分支會被自動忽略掉。這就很容易為特定目標(如 IE11 或 mobile)提供特定功能,而不會影響包的大小。 |
| PWA 支持 | 漸進式 Web 應用程序通過緩存內容甚至脫機工作,創(chuàng)建更快、更可靠的用戶體驗。通過配置文件或者在代碼中定義,dojo 很容易創(chuàng)建一個 service work,并將其構建為應用程序的一部分。 |
| 構建時渲染 | 在構建時渲染路由以生成初始的 HTML 和 CSS。在構建時渲染,Dojo 可以節(jié)省出初始渲染的成本,創(chuàng)建出一個響應性更高的應用程序,且不會引入額外的復雜性。 |
基本用法
Dojo 提供了一組 CLI 命令,輔助創(chuàng)建和構建應用程序。本指南假設已全局安裝 @dojo/cli,且在項目中安裝了 @dojo/cli-build-app 和 @dojo/cli-test-intern。如果項目是使用 @dojo/cli-create-app 初始化的,那么這些依賴應該已經存在。
構建
Dojo 的 CLI 工具支持多種構建目標或 mode。在 dojo create app 為 package.json 生成的幾個腳本(scripts)中可看到所有模式。
運行以下命令,創(chuàng)建一個為生產環(huán)境優(yōu)化過的構建。
> dojo build --mode dist
此次構建使用 dist 模式創(chuàng)建應用程序包,并將結果輸出到 output/dist 目錄中。
運行服務和監(jiān)聽變化
當在 dev 或 dist 模式下運行時,可以使用 --serve 標記啟動一個 web 服務器。應用程序默認運行在 9999 端口上。可以使用 --port 標記修改端口。使用 --watch 標記,Dojo 的構建工具也可以監(jiān)聽應用程序的變化并自動重新構建。
生成的 package.json 文件中包含 dev 腳本,它使用這些標記運行應用程序的構建版本,并監(jiān)聽到磁盤上的文件發(fā)生變化后會自動重新構建。
> dojo build --mode dev --watch file --serve
應用程序也會提供 source map。這樣調試器就可以將構建的 JavaScript 代碼映射回位于 src/ 文件夾下原本的 TypeScript 代碼上。
測試
Dojo 使用 Intern 運行單元和功能測試。
T運行 tests/unit 中單元測試的最快方式,是使用新建 Dojo 應用程序時創(chuàng)建的 NPM 腳本。
命令行
# execute unit tests
npm run test:unit
# execute functional tests locally using headless Chrome and Selenium
npm run test:functional
支持的瀏覽器
Dojo 是一個持續(xù)演變的框架。默認情況下,發(fā)布的 dojo 版本會支持最新瀏覽器的最近兩個版本。Dojo 要跨瀏覽器實現標準功能,其所需的 polyfill 都是通過 @dojo/framework/shim 按需提供的。要支持 IE11,需要打開 --legacy 標記。
Dojo 配置
可在 .dojorc 中添加其它配置選項。這些選項通常通過命令行擴展可用的設置,并支持更高級的功能,如國際化、代碼拆分、PWA 清單和忽略代碼等。
.dojorc 文件中包含一個 JSON 對象,可以為能在 dojo 命令行工具上運行的任何命令配置信息。在配置對象中為每個命令分配一個節(jié)點,可在其中存儲配置信息。
{
"build-app": {
"pwa": {
"manifest": {
"name": "My Application",
"description": "My amazing application"
}
}
},
"test-intern": {},
"create-widget": {
"tests": "tests/unit"
}
}
本示例中,@dojo/cli-build-app、@dojo/cli-test-intern 和 @dojo/cli-create-widget 三個 CLI 命令模塊各對應一個節(jié)點。配置 總是 分層的,按照 command => feature => configuration 的順序排列。