324
阿裏雲前端工程化工具 - Dawn
一、Dawn 簡介
Dawn（後續將簡稱為 DN）是阿裏雲前端團隊，新一代的前端構建工具，簡化並統一了針對開發人員的「命令行接口」，將開發過程抽象為有序的 6 個階段 + 1 個常用操作。不會因為工具本身的擴展，而擴展新的用法，統一、一致，免於記憶，通過 DN 創建的工程還將會結合 GitLab CI 進行持續集成。
DN 相較於同類工具的特點是什麼？
- 簡單、統一、一致，無論擴展還是使用它。
- 無關框架、甚至可以無關語言、輕中心化（並非完全去中心化，而是「輕」）
- 鬆散且易於整合，注重重用，易於擴展
- 雲端統一下發構建規則，易團隊統一管理
- 免於安裝或更新，除 CLI 外，無須其它任何形式的安裝和更新操作
相較於同類工具而言，DN 采用了獨有的機製，將整個整個工具拆分為三大部分：
- CLI（命令行工具）
- Middleware（中件間）
- Template（工程模板）
通過「中間件」方式抽離可重用功能，包括但不限於「創建、構建、測試、發布」等，不同階段可能出現的操作，都將通過簡單的 API 封裝為「中間件」，並相互「無依賴」，鬆散且易於整合。
任何搭建好的「普通工程」，都可以輕鬆發布為「模板」，製作模板變得極其簡單，隻需做兩件事情：
- 組織工程目錄結構並配好相關依賴。
- 配置 pipe.yml 聲明各階段要做的事情。
那麼，使用 DN 的同學分為兩大類：
- 使用者：使用 DN 工具及其生態，進行工程創建、構建、測試、發布等工作
- 貢獻者：為 DN 開發新的「中件間」，製作新的「工程模板」，或提出任何建議。
二、安裝和更新
依賴的環境、軟件及其版本：
- 需要在公司內網或撥入 VPN
- Node.js v7.6.0 及以上版本
- Tnpm 4.x 因為 DN 發布於內網 registry
- 部分現有中件間還依賴 Git，比如「前端資源發布中件間」
安裝或更新 DN:
$ tnpm i @ali/dawn -g
部分同學的電腦可能需加 sudo
二、基本使用
1. init 命令
$ mkdir demo
$ cd demo
$ dn init [template] [--force]
如果指定了 template 直接按指定的模板初始化項目，否則列出來可用「模板列表」，如下：
? 共 8 個可用模板，回車初始化對應工程 (Use arrow keys)
1. node : 普通 Node.js 工程
2. front : 普通 SPA 前端工程
3. multipage : 支持多頁麵的前端工程
4. dbl-template-dblm : DBL 團隊移動工程模板
5. console : 控製台模板
6. prev2next : prev 版本 dbl 工程一鍵遷移
7. midway : midway 工程模板
8. middleware : DBL vNext 中間件工程
選擇一個工程類型，回車即可按向導初始化一個工程。
2. dev 命令
$ dn dev
通過 dev 命即可開始開發，通常會啟動自動構建服務，取決於你的工程模板可能會有不同處理，例如 front 工程 會啟動並打印出相關信息：
加載中間件...
完成
清理文件或目錄...
完成
開始構建...
啟動開發服務器...
The server on "localhost:8001" started
實時編譯完成: 1493200481119
3. test 命令
$ dn test
test 是至關重要的命令，重要的動作之前常會觸發 test 的執行，比如 publish 之前，同時，通過 DN 創建工程將會自動啟用 CI（持續集成），當你有新的代碼 push 到 Git 某個分支，會是創建了 Merge Request 時，CI Job 將會被觸發，將會通過 dn test 進行自動化測試，在測試通過後還將嚐試通過 dn build 自動構建，執行示例如下：
加載中間件...
完成
執行靜態檢查...
/Users/ali-130284n/demo/src/index.js
1:1 warning Unexpected console statement no-console
1 problem (0 errors, 1 warning)
完成
4. build 命令
$ dn build
執行構建任務，不同的工程類型的構建過程和結果可能不同，取決於初始化工程時使用的工程模板，例如 例如 front 工程 會打包所有前端資源並錢如下信息：
加載中間件...
完成
清理文件或目錄...
完成
開始構建...
完成
完成後，會在當前項目的根目錄產生 build 目錄，這是構建結果。
5. publish 命令
可以通過 publish 命將發布代碼或構建結果，不同的工程模板決定了最終發布位置，是否支持 publish 命令決定於選擇的「工程模板」，比如 front 工程的發布大約如下：
發布到預發...
加載中間件...
完成
執行靜態檢查...
/Users/ali-130284n/ali/dev/dbl-repos/dbl-template-front/src/index.js
1:1 warning Unexpected console statement no-console
1 problem (0 errors, 1 warning)
完成
加載中間件...
完成
找到存在的 pre-push
清理文件或目錄...
完成
開始構建...
完成
Total 0 (delta 0), reused 0 (delta 0)
To gitlab.alibaba-inc.com:dbl-repos/dbl-template-front.git
3cf3
完成
如果您僅僅是使用 DN，用於創建、構建或發布工程，我告訴你，這幾個命令就夠了，如果您想進一步了解，或者貢獻 DN，擴展或改過它，那麼繼續向下看。
三、命令執行過程
初始化執行過程
命令（pipe）執行過程
四、如何製作一個工程模板
通常您應先看看是否已經存滿足您需求的模板，查看已發布的工程模板，可以通過如下命令：
$ dn system template
將會列出所有可用的工程模板，如下:
? 共 8 個可用模板，回車打開說明文檔 (Use arrow keys)
1. node : 普通 Node.js 工程
2. front : 普通 SPA 前端工程
3. multipage : 支持多頁麵的前端工程
4. dbl-template-dblm : DBL 團隊移動工程模板
5. console : 控製台模板
6. prev2next : prev 版本 dbl 工程一鍵遷移
7. midway : midway 工程模板
8. middleware : DBL vNext 中間件工程
上下箭頭鍵可以選擇指定中件間，然後「回車」可以查看對應中件間的在線使用說明。
DN 本身隻對開發人員提供一致的命令行接口，不同的工程類型的構建過程，由和 template 通過 pipe 配置聲明各個階段 pipeline 中的 middleware 完成，一個「普通的工程」搭建好後就可發布為一個「工程模板」，通常一個「工程模板」有基本固定的目錄結構，比如：
project
├── .dbl-next
├── README.md
├── build
│ ├── index.html
│ └── js
│ ├── common.js
│ └── index.js
├── package.json
└── src
├── assets
│ └── index.html
└── index.js
模板配置存放於 .dn-next 目錄，其中最重要的是 pipe 配置，大體如下：
init:
- name: tnpm-install
- name: pkginfo
dev:
- name: clean
- name: webpack2
watch: true
- name: server
build:
- name: clean
- name: webpack2
test:
- name: lint
publish:
- name: shell
script:
- dn test
- dn build -e prod
- name: alicdn-publish
每個階段都可聲明要做的事情，通常對慶一個個中件間，每個中件間可能用不同用法，不同的工程模板可根據需求進行不同的配置，具體用法可參考各中件間的使用說明。
pipe 還可以是 json 格式：
{
"init": [
{
"name": "tnpm-install"
}
],
"dev": [
{
"name": "$local",
"location": "./lib/index.js"
}
]
}
工程模板通過 pipe 輔助 cli 完成對應的構建任務，一個工程中模板可以在每個 pipe 中放置多個「中間件」，支持的 pipe 有：
| 名稱 | 說明 |
|---|---|
| init | 在初始化工程的時候觸發 |
| dev | 在啟動開發服務時觸發 |
| test | 在添加項目元素時候觸發 |
| test | 在執行測試的時候觸發 |
| build | 在執行構建時觸發 |
| pubish | 在執行發布時觸發 |
工程模板製作完成後，推送到內網 GitLab 任意「公開的 Repo」 後，可聯係 @正鋒 發布對應工作模板。
五、如何開發一個中間件
通常您應先看看是否已經存滿足您需求的中件間，查看已發布的中間件，可以通過如下命令：
$ dn system middleware
將會列出所有可用的中間件，如下:
? 共 14 個可用中件間，回車打開說明文檔 (Use arrow keys)
01. shell : 可執行 shell 的中間件
02. list : 通過列表選擇進行分支執行的中件間
03. pkginfo : 可設定 Node 包信息的中間件
04. clean : 清理文件或目錄的中件間
05. prepush : Git Hook - pre-push
06. tnpm-install : Node 模塊依賴安裝插件
07. tnpm-publish : Node 模塊依賴安裝插件
08. lint : 語法檢查中間件
09. mocha : 基於 mocha 的單元測試中間件
上下箭頭鍵可以選擇指定中件間，然後「回車」可以查看對應中件間的在線使用說明，多數常用的功能，比如 webpack、lint 都已有可用的「中間件」提供。
當您決定要開發一個新的中件間時，您可以通過 dn init 命令，然後選擇「中件間工程模板」即可快速創建一個「中件間」，如下：
? 共 8 個可用模板，回車初始化對應工程
1. node : 普通 Node.js 工程
2. front : 普通 SPA 前端工程
3. multipage : 支持多頁麵的前端工程
4. dbl-template-dblm : DBL 團隊移動工程模板
5. console : 控製台模板
6. prev2next : prev 版本 dbl 工程一鍵遷移
7. midway : midway 工程模板
8. middleware : DBL vNext 中間件工程
DN 中間件和 Koa 中件間類似，中件間核心基礎代碼結構如下：
/**
* 這是一個標準的中間件工程模板
* @param {object} opts cli 傳遞過來的參數對象 (在 pipe 中的配置)
* @return {AsyncFunction} 中間件函數
*/
module.exports = function (opts) {
//外層函數的用於接收「參數對象」
//必須返回一個中間件處理函數
return async function (next) {
//在這裏處理你的邏輯
this.console.log('This is an example');
//next 觸發後續執行
//如果需要在後續中間件執行完成再做一些處理
//還可以 await next(); 並在之後添加邏輯
next();
};
};
中間件開發完成後，推送到內網 GitLab 任意「公開的 Repo」後，可聯係 @正鋒 發布對應中件間。
-- end --
AD：
阿裏雲業務運營前端團隊招聘 P6/7，歡迎推薦或轉崗。
最後更新：2017-07-24 16:02:35