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