Dojo Build系統介紹

1. 簡介

Build系統是產品正式發布的最後一道工序，其效率和品質直接決定著最終產品的效率和品質。雖然在傳統應用中，Build系統已經相當成熟，但在Web領域，依然是八仙過海，各顯神通，甚至不經Build就直接上線的也比比皆是。Web系統的零散性、複雜性，也決定了對其進行Build是一件複雜的事情。但通過Dojo，我們認識到了一款開源的Web應用Build系統：bdBuild，也見識了其強大的功能。它是一個獨立的通用Build系統，完全用JavaScript寫成，可以運行於NodeJS或者Rhino等JavaScript引擎，理論上可以對任何Web應用進行Build。下面就將介紹Dojo中是如何用bdBuild系統來實現Web應用的Build的。以此為起點，你也可以利用bdBuild實現自己的Web應用Build系統，對非Dojo的應用來進行打包。

bdBuild是一套開源的前端應用Build引擎，完全用JavaScript寫成，可運行於Node.js，Rhino等JavaScript引擎。其強大的功能和靈活可擴充的架構使得其能夠應用於任何Web應用的打包。Build在傳統應用中可以翻譯為構建，而在Web中，也許翻譯成打包更加適合。一個合格的Web Build系統至少應該能夠完成以下幾件事情：2.
bdBuild系統簡介

1. 排除開發時檔案，比如備份檔案，代碼中的調試資訊，單元測試檔案，等等。
2. 將頁面需要的多個資源檔打包成一個檔案，並進行壓縮，通常是針對JavaScript和CSS檔案。這個過程包括了自動處理資源檔之間的依賴關係，能夠按順序進行打包。
3. 拷貝資源檔到目標位置。

基本上來說，這些工作的最終目的都是為了提高效能，Http協議的特性決定了多次請求取得多個小檔案的效率遠低於一次請求一個大檔案。所以Web Build的首要目標就是合并小檔案形成一個大檔案。為了實現這些通用功能，bdBuild系統將Build的過程分為以下幾個步驟：

1. 發現資源（discovery）。即找到最終產品所需要的所有資源，不僅包括JavaScript檔案，還包括圖片，CSS等等。bdBuild實現了預設的資摘要搜索引擎，你也可以通過建立自己的資摘要搜索引擎來告訴系統如何尋找需要的資源。
2. 轉換資源（transform）。即對每個資源進行相應的處理，這個處理是一個有序可擴充的步驟。例如，讀取文本，壓縮JavaScript代碼，就是2 個不同的轉換步驟，前面所有轉換步驟的結果是作為下一個步驟的輸入，這樣實現了對資源的多重加工。你可以通過設定檔來加入自己的資源處理步驟。
3. 控制打包（build control）。這通過一個設定檔，來精確控制每個資源轉換的順序和依賴關係。bdBuild還在其中引入了Gate的概念，將打包過程分為不同的階段。

雖然當前bdBuild系統仍然處於alpha測試階段，但是Dojo已經對其進行完善和封裝，形成了自己的Build系統，在已經發布的Dojo 1.7 beta版本中，我們已經可以使用它來進行Web應用的打包。

3. Dojo Build系統簡介

要使用Dojo的Build系統，首先需要下載源碼版的Release包，在util/build下就是build相關的工具：

Dojo 對bdBuild系統進行了相當程度的封裝，使得針對Dojo的打包變的更加容易，通過引入層（layer）的概念，可以很方便的指定哪些模組應該被壓縮到同一個JavaScript檔案。同時，Dojo Build系統還會自動把其它檔案拷貝到目標檔案夾，每個JavaScript檔案或者CSS檔案都會同時被壓縮。下面的代碼說明了layer的作用：

<script type="text/javascript" src="/dojoroot/dojo/dojo.js"></script><script type="text/javascript" src="/dojoroot/dijit/dijit.js"></script><script type="text/javascript" src="/js /mylayer.js"></script>

這是在頁面中引入JavaScript的一段典型代碼，其中dojo.js, dijit.js和mylayer.js就是在build系統中配置的3個layer，它們都包含了所有各自需要的代碼。通過layer的方式，能夠把頁面需要的多個JavaScript檔案打包成一個，加快了頁面的載入速度。layer是在Build的設定檔profile中指定的，如下面的介紹。

Profile的概念

通常一個完整的系統會不只有一個layer，而且對於同一頁面，也有可能需要多個layer。所以，Dojo定義了profile這個概念，來描述整個打包的配置和參數。。在dojoroot/util/buildscripts/profiles/下可以看找到系統內建的一些profile檔案，它們用於打包標準的dojo.js和dijit.js等等。一個典型的profile檔案樣本如下：

dependencies = {    layers: [    {        name: "dojo/dojo.js",        dependencies: [            "dijit._Widget",            "dijit._Templated",            "dojo.fx",            "dojo.NodeList-fx"        ]    }    ],    prefixes: [    [ "dijit", "../dijit" ],    [ "dojox", "../dojox" ],    [ "myNamespace", "~/src/myNamespace" ]    ]}

檔案中定義了一個全域對象dependencies。包含2個必須屬性：layers和prefixes。在layers數組中，可以定義多個layer。每個layer的name屬性工作表明了輸出的檔案，是一個相對於releaseDir（後面介紹如何指定）的相對路徑。dependencies數組包含了這個layer需要的模組。Build系統會去遞迴尋找所有依賴的模組並將它們全部打包進來。

另一個屬性是prefixes數組，其中定義的是模組映射關係，它告訴系統到哪裡去尋找一個Dojo模組。其作用和應用代碼中使用的 dojo.registerModulePath是一樣的。Prefixes中的每個元素也是一個數組，包含兩個元素，前面是模組首碼，比如 “dijit”，後面一個是相對於util/路徑的相對路徑，比如“../dijit”。

有了這個profile，我們就可以來進行打包了。在Dojo中，是通過util/build/build.js來完成的。因為Build系統自身的代碼都是JavaScript，因此需要一個JavaScript運行環境，現在同時支援的是NodeJS和Rhino。前者通常需要Linux或者 Cygwin環境，後者則需要Java環境的支援。NodeJS比Rhino運行速度快的多，條件允許的話，大家儘可能用NodeJS來進行build。下面的代碼示範了如何開始一個build：

使用NodeJS：

node dojoroot/dojo/dojo.js load=build [options]  

使用Java：

java -Xms256m -Xmx256m -jar path/to/util/shrinksafe/js.jar path/to/dojo/dojo.js baseUrl=path/to/dojo load=build [options]

可以看到，build.js檔案接受多個參數（options），完整的參數列表可以通過指定—help參數來擷取，比如releaseDir指定了要輸出 build結果的檔案夾。Action指定了要執行的操作序列，例如action=clean,check,release。當然還有一個最關鍵的參數：profile，它指定了打包的設定檔，從而控制整個打包的過程。例如：

Node dojoroot/dojo/dojo.js load=build profile=/home/dojo/my.profile.js action=check,release

這裡的profile可以是如下多種類型：

• 如果是html檔案，則分析其中的dojo.require，從而自動產生一個包含所有模組的profile
• 如果是標準profile檔案，則直接處理
• 如果是檔案夾，則掃描其中的所有以profile.js結尾的檔案，分別進行打包。

命令列的完整參數如下面的表格所示：

參數	描述
--build <filename>	指定進行build control的指令碼。
--profile <filename>	指定profile檔案。
--action	指定要執行哪些操作，比如check, clean, release。
--releaseDir	輸出build結果的檔案夾。
--version	指定版本號碼。

Layer的定義

一個profile中可以有多個layer。Layer的配置參數除了上面介紹的name和dependencies之外，還有一個屬性非常有用，那就是：layerDependencies。它指定了所依賴的layer，所有出現在指定layer中的模組，都不會被包含在當前模組中。例如，假設有2個頁面P1和P2，他們所共用的代碼被打包進layerA，各自特殊的則被打包進layerB和layerC。那麼在描述layerB和layerC時就可以指定他們的layerDependencies為layerA，從而layerA中的代碼只會被使用者load一次，提高了載入速度。而所有的layer
都回隱含的依賴於標準的dojo.js layer。所以在dojo.js中出現的代碼是不會出現在其它的layer中的。

除此之外，layer還支援以下可選屬性：

copyrightFile	指定一個包含著作權資訊的文字檔，其內容將被包含在產生的layer檔案中。
customBase	前面提到所有layer會依賴於標準的dojo.js。這個屬性可以改變這個預設行為，改為依賴於一個定製的dojo.js。可能的情境是，你需要的是一個更小的dojo.js。比標準的小很多。
keepRequires	一個數組，包含需要在運行是require的模組。Dojo中可以用dojo.require()來引入一個module，在build的時候會直接在layer中引入這些module。如果你需要讓某些檔案需要時再require，可以在這個參數中指定。
discard	布爾類型。表示當前layer是否需要寫入一個檔案。預設為false，即一個layer當然要被寫入一個單獨的檔案。但在某些情況下，一些layer只會作為其它layer的依賴而存在，這時此參數可以設定為true。

4.小結

bdBuild 是一個靈活、可擴充的開源build系統，使用JavaScript寫成，並運行於Node.js, Rhino等JavaScript環境。非常適合前端人員建立自訂的打包過程。Dojo內建的build系統就是基於bdBuild，本文簡要介紹了其原理和用法，雖然對於一般的Dojo開發這已經足夠，但是如果要深入理解bdBuild，甚至開發其中的外掛程式，仍然需要更多深入的瞭解。有興趣的同學可以參考其文檔，繼續學習。

本文已經首發於InfoQ中文站，著作權，原文為《Dojo
Build系統介紹》，如需轉載，請務必附帶本聲明，謝謝。  
InfoQ中文站是一個面向中高端技術人員的線上獨立社區，為Java、.NET、Ruby、SOA、敏捷、架構等領域提供及時而有深度的資訊、高端技術大會如QCon 、線下技術交流活動QClub、免費迷你書下載如《架構師》等。