Dojo Build 簡介

翻譯自:https://github.com/dojo/frame...git

Dojo 提供了一套強大的命令行工具,讓構建現代應用程序更加簡單。github

能夠自動建立包(Bundle),可使用 PWA 在本地緩存文件,能夠在構建階段渲染初始的 HTML 和 CSS,也可使用 Dojo 的 CLI 工具和 .dojorc 配置文件按條件忽略一些代碼。或者脫離(eject) Dojo 的構建工具,直接使用底層的構建工具以作到徹底掌控。web

功能 描述
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 初始化的,那麼這些依賴應該已經存在。npm

構建

Dojo 的 CLI 工具支持多種構建目標或 mode。在 dojo create apppackage.json 生成的幾個腳本(scripts)中可看到全部模式。json

運行如下命令,建立一個爲生產環境優化過的構建。瀏覽器

> dojo build --mode dist

這次構建使用 dist 模式建立應用程序包,並將結果輸出到 output/dist 目錄中。緩存

運行服務和監聽變化

當在 devdist 模式下運行時,可使用 --serve 標記啓動一個 web 服務器。應用程序默認運行在 9999 端口上。可使用 --port 標記修改端口。使用 --watch 標記,Dojo 的構建工具也能夠監聽應用程序的變化並自動從新構建。bash

生成的 package.json 文件中包含 dev 腳本,它使用這些標記運行應用程序的構建版本,並監聽到磁盤上的文件發生變化後會自動從新構建。服務器

> dojo build --mode dev --watch file --serve

應用程序也會提供 source map。這樣調試器就能夠將構建的 JavaScript 代碼映射回位於 src/ 文件夾下本來的 TypeScript 代碼上。app

測試

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 的順序排列。