阿里雲前端工程化方案dawn

01-26

申明：這不是一個kpi項目，僅僅是為了分享我們的一些經驗，歡迎溝通交流。serve、打包、lint、mock等，將這些功能點抽象成一個個中間件，方便插拔。修改項目配置不用修改dn，只需要修改項目根目錄下.yml文件即可。源碼已開源alibaba/dawn，歡迎關注。

一、Dawn 簡介

Dawn（後續將簡稱為 DN）是阿里雲前端團隊，新一代的前端構建工具，簡化並統一了針對開發人員的「命令行介面」，將開發過程抽象為有序的 6 個階段 + 1 個常用操作。不會因為工具本身的擴展，而擴展新的用法，統一、一致，免於記憶，通過 DN 創建的工程還將會結合 GitLab CI 進行持續集成。

DN 相較於同類工具的特點是什麼？

簡單、統一、一致，無論擴展還是使用它。
無關框架、甚至可以無關語言、輕中心化（並非完全去中心化，而是「輕」）
鬆散且易於整合，注重重用，易於擴展
雲端統一下發構建規則，易團隊統一管理
免於安裝或更新，除 CLI 外，無須其它任何形式的安裝和更新操作

相較於同類工具而言，DN 採用了獨有的機制，將整個整個工具拆分為三大部分：

CLI（命令行工具）
Middleware（中件間）
Template（工程模板）

通過「中間件」方式抽離可重用功能，包括但不限於「創建、構建、測試、發布」等，不同階段可能出現的操作，都將通過簡單的 API 封裝為「中間件」，並相互「無依賴」，鬆散且易於整合。

任何搭建好的「普通工程」，都可以輕鬆發布為「模板」，製作模板變得極其簡單，只需做兩件事情：

組織工程目錄結構並配好相關依賴。
配置 pipe.yml 聲明各階段要做的事情。

那麼，使用 DN 的同學分為兩大類：

使用者：使用 DN 工具及其生態，進行工程創建、構建、測試、發布等工作
貢獻者：為 DN 開發新的「中件間」，製作新的「工程模板」，或提出任何建議。

二、安裝和更新

依賴的環境、軟體及其版本：

Node.js v7.6.0 及以上版本
Tnpm 4.x 因為 DN 發佈於內網 registry
部分現有中件間還依賴 Git，比如「前端資源發布中件間」

安裝或更新 DN:

$ 即將開源，敬請期待

部分同學的電腦可能需加 sudo

在 Windows 上使用 DN

Dawn Core 本身兼容 Windows，但是有一些中件間會動態執行 Shell 腳本，對應的「腳本」目前並不能 100% 兼容 Windows，做如下配置，可以在 Windows 更好的使用 Dawn：

確認系統是 Win7 以上，確認安裝的 DN 是 >= 0.3.5
安裝 Git for Windows，下載地址：https://git-for-windows.github.io/
新增 WIN_BASH 環境變數，值為 true
編輯 PATH 環境變數，將 Git for Windows 的 bin 目錄（通常是 C:Program FilesGitin）添加 path 中

完成以上檢查或配置後，通過「運行->CMD」打開「命行行窗口」，好了，在 Windows 使用 DN 吧

三、基本使用

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，擴展或改過它，那麼繼續向下看。

四、命令執行過程

初始化執行過程

user->cli: 執行 initcli->conf: 拉取模板列表conf->cli: 工程模板列表cli->user: 讓用戶選擇工程模板user->cli: 選擇指定的工程模板cli->repo: 下載工程模板repo->cli: 工程模板cli->project: 複製工作文件cli->project: 安裝依賴

命令（pipe）執行過程

cli->project: 讀取本地 pipe 配置project->cli: 本地 pipe 配置cli->conf: 讀取公共 pipe 配置cli->cli: 合併配置cli->conf: 查找中件間cli->repo: 載入中件間cli->project: 執行 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: pkginfodev: - name: clean - name: webpack2 watch: true - name: serverbuild: - name: clean - name: webpack2test: - name: lintpublish: - 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(); };};

中間件開發完成後，推送到內網 Git 任意「公開的 Repo」後，可聯繫管理員發布對應中件間。

中間件式的工程化方案，包含初始化模板、自定義模板、中央控制、持續集成、自動推送git等功能。開源中，歡迎關注後續進展。

按照國際慣例，此處打個廣告：求P6/P7/P8前端工程師，歡迎投簡歷至: xiaoming.dxm@alibaba-inc.com. 註明來自：知乎。感謝。