Ext 介紹入門之 制定自己的EXT版本

入門

有幾種方案可制定Ext，製成裁減過的版本輸出。而且這是至關重要的，為什麼呢？

• 只需包含你所需的檔案，減少部署時檔案過大的開銷。
• 你可縮小源碼大小，也是部署時的重要一環。
• 如果你是支援人員使用者 有一個可用的SVN訪問，你可在開發階段中建立一個中間臨時的版本，用於測試、試用新功能和官方發布新版之間的bug調試。
• 你亦可利用一些自動化的工具，或直接整合到你慣用的自動化調用程式（如，通過Ant）。

本文主要覆蓋了版本產生的三種不同方案：

• 線上的Build Your Own 工具。針對一次性發布這是最有用的，而且無須進行安裝便可輕鬆建立制定的檔案。
• 基於Java的，命令列的Ext SVN Builder。 能輕鬆地自動批處理SVN的版本，推薦Mac和Unix的使用者使用。
• 我們的JS Builder小程式。推薦給windows的使用者，能提供更靈活的方案，而且略比其他方案有優勢。

線上產生的版本

通過這種簡易的方式hosted build tool，任何人都可制定屬於自己的EXT版本。同時這是完成這項任務最迅速和簡單的方式。可是，這種方式並不包括資源檔和範例檔案，並且發布的只是當前的Ext 發布版本。 該工具的主要目的是為了程式產生產品時檔案部署最佳化。而伸縮性更強的方案，或是說要在開發過程中的產生Ext的分支版本，就要看看接下來的部分。

產生步驟

1. 瀏覽http://extjs.com/download/build
2. 選擇適合你的庫，點擊 Next.
   假如你不確定列出的庫哪一種比較適合自己的話，選擇預設的（Ext Stand-alone Ext獨立版本）便可。有關這些庫選擇上的差異，可參閱常見問題FAQ.
3. 選擇好你所需要的組件包然後點擊Build It!。
   注意相關的依賴關係將會自動產生（無須再選取），但有些依賴是可選的，那就需要手動選取它們。Builder會自動控制每個源檔案只是有一個包存在，哪怕是多次包含依賴都不會重複。

Online Builder 利&弊 利 弊 選擇結果

使用簡單 迅速! 內見依賴檢查 你無須維護和進行安裝	整個過程手工控制，不能自動化 需要Web的訪問 產生的內容有所限制 沒有未產生調試版本的選項 不能包含非Ext的檔案 只限當前發布的Ext — 不能處理開發階段中的分支版本
打算一次過地產生，這是一種較適合的方案，快速、簡單而且不需要任何安裝東東。 打算長期組建檔案，或需要維護著發布設定， JS Builder (Windows的話) 或是 Ext SVN Builder (Mac/Unix平台)可能是較好的方案

SVN的相關事項

訪問Ext SVN(Subversion)空間的功能限於為支援人員使用者提供。雖然下面的產生方案不一定需要SVN訪問這一功能，但如果要擷取最新的Ext代碼，就必須從SVN上下載。 如果你擁有一個SVN訪問，推薦安裝一個SVN用戶端或IDE內建的SVN訪問功能。有許多的用戶端可供選擇，Windows使用者的話TortoiseSVN可能是最好的選擇。討論SVN的安裝和配置已經超出了本文的範圍。而下面的部分就假設讀者已經有一個已配置好的SVN用戶端並能運行起來。

Ext SVN Builder

更為方便的Java工具，允許一行命令就產生整個Ext分類樹包括（source、resource和examples）。不過，它不提供像GUI 那種靈活的方式選取檔案來產生。因此，它常用於SVN使用者下載最新版的EXT後測試的工作。如果你沒有SVN的訪問，這個工具對你的作用可能不大，不過可用JS Builder來代替。

產生步驟

1. 確定在Java 上的版本是已經安裝的
2. 在這裡下載Ext SVN Builder程式
3. 開啟控制台或者是命令列的視窗，進入安裝目錄並運行：
   Unix: java -jar builder.jar -s "/your/path/to/svn/dir" -o "/your/output/dir"
   Windows: java -jar builder.jar -s "c:\your\path\to\svn\dir" -o "c:\your\output\dir"

命令列有下列的參數：

• -s: SVN 檢出目錄的路徑（必須）
  這路徑應該是包含source、resources、exmaples最頂層的的檔案夾。
• -o：Ext輸出路徑（必須）
  可以是任意的路徑。注意如遇相同的檔案會被覆蓋，但SVN那裡刪除了的這裡不會刪除。所以最終發布時應重新整理清理一下這個目錄。
• -d: 產生調試，不壓縮的版本（可選的）
  輸出的檔案的注釋會被剔除，但代碼就不作壓縮。這對開發中的調試階段較為方便。

構建自訂產生

像本文開頭所提及的那樣，Ext SVN Builder主要用於在隨時的情況下，產生來自SVN的最新版本。 而且， 對於讀取.jsb格式的檔案也是毫無問題的。因為這種檔案是JS Builder項目的儲存格式， 為每個項目的發布都儲存了一切的依賴關係在其中。即使這種檔案是為JS Builder而設的，但是你也可以根據自身的需求修改裡面的內容和SVN Builder配套使用（譯註：jsb使用xml儲存）。一般來說，如需要這種層面上的應用，倒不如用JS Builder, 可能更適合你的需求，我們下一節分析。

自動化指令碼

Ext SVN Builder工具的一大優點是能配合shell指令碼（windows世界便是批次檔）輕鬆地自動產生輸出。這樣可省下每次產生輸出時輸入路徑和記憶路徑的時間。這裡就以一個簡單的例子作示範，不過當然你應根據當時的情況調整指令碼環境。

Unix Shell Script

正如擷取它那樣容易—只需簡單地儲存相同的控制台命令（如下）到一個文字檔，這個產生步驟就由你自己所寫的指令碼調用執行。例如， 你建立了一個叫做"build-ext-2.0"的文字檔包含這段指令碼：

java -jar builder.jar -s "/your/path/to/svn/dir" -o "/your/output/dir"

...你就會在控制台裡執行，像Bourne Shell的寫法會是sh build-ext-2.0

Windows批次檔

把下列的指令碼儲存為一個批次檔（如"build-ext-2.0.bat"），並設定所需的路徑變數。路徑變數中的空白符要作適當的處理。假設指令檔和builder.jar是在同一個目錄下，不過可通過設定絕對路徑解除檔案位置的限制。注意Java路徑必須明確地聲明好因為批處理自己不能從系統路徑中擷取。檔案建立好之後，在資源管理員中雙擊執行或是命令列的方式執行，如： build-ext-2.0

echo off
set JAVA_PATH="C:\Program Files\Java\jre1.6.0_02\bin"
set EXT_PATH="C:\SVN\Ext\branches\ext2.0"
set OUTPUT="C:\Inetpub\wwwroot\deploy\ext-2.0"
 
%JAVA_PATH%\java -jar builder.jar -s %EXT_PATH% -o %OUTPUT%

Ext SVN Builder Pros & Cons 利 弊 Bottom Line

跨平台 方便快捷地從SVN產生 可自動匯出壓縮和調試兩個版本 支援從SVN trunk或開放分支中產生 可shell scripting自動處理	需要安裝Java 檔案內容有一定限制 不能包含非Ext的版本 慢（因為涉及Ext全部三個複雜的項目）
在Mac/Unix上，該工具是不二的選擇。設定好你的shell指令碼和一行命令以備開始產生。Windows應採用功能更好的JS Builder

JS Builder

JS Builder （簡稱JSB）是管理組建檔案的成熟方案，而其本身就是在Ext團隊內部用於發布工程版本的工具。

雖然只能在Windows .NET環境下運行，在某些場合可能會受到一些限制，但它比其它以上討論過的產生方案有著更多的優點。

.jsb 格式的檔案包含了Ext代碼發布產生的資訊，可用JSB的圖形介面來開啟與編輯。

JSB GUI

要完整地討論JSB的使用已經超出了本教程的範圍。 實際上， JSB不僅有一般的壓縮/輸出功能，還可將指定的JS和CSS檔案一起輸出到項目指定產生版本。

簡單試著建立一個新的項目，然後加入你所需的檔案。在Options視窗裡面有些許多的選項，在Project標籤頁和Build標籤頁裡面有和項目輸出相關的不同設定。

接著，我們將會討論怎麼更有效地從源碼產生EXT。JSB是必需的，如果你還沒有，應先從JSB項目首頁下載一個JSB。 完成後，接著就可進行產生的工作。

產生步驟

1. Ext源檔案可以是在隨便一個地方， 但原始的目錄結構應保持一致，不應作目錄結構上的改動。
2. Ext \trunk （或是 \branches\ext2.0）下面找到 \src 檔案夾，雙擊ext.jsb 啟動JSB介面。
3. 預設下， 一切的設定就應該像Ext團隊般的設定。在Build Settings'標籤頁下面的Output Directory的值要改為你自己的目錄。這是輸出檔案所在的根目錄。
4. 點擊Build Project 按鈕（右手邊最後的功能表按鈕）或從菜單選擇 select Build > Build Project 。這樣就會開始組建檔案，在輸出的目錄中將會看到這些檔案。
5. 按照情況重複執行三個.jsb 檔案（其它的在\resources 和\examples）。

在Build Settings標籤頁的底部看起有一些列表是列出輸出檔案的，這些就是“輸出目標”，或是將多個源檔案捆綁成為輸出檔案。其目的在於建立在用一個程式中以不同的功能區分的多個包的版本。你注意到了 ext.jsb那一項是"Everything" — 這是定義了許多人預設使用Extext-all.js的版本。你可根據自身的需求來編輯這些輸出目標。按照這種方式來管理你的項目是一個不錯的方式—你可將全部的JavaScript的程式碼整合到單獨一個檔案中去。

有時為了測試，要將JSB和最新版的SVN更新配合一齊工作，典型的工作流程是這樣的：

• 從SVN上更新Ext源碼到本地。
  如果你編輯過任何的檔案（包括.jsb檔案），那麼必須先刪除或移動這些檔案— SVN不會覆蓋這些檔案。 注意： 基於當前的實現， 如果你打算自訂輸出的目錄， 你要每次編輯這項設定因為所有的設定都儲存在 .jsb 檔案中，而這個檔案總是由SVN更新的。該功能可能會在未來的版本中改進，實現每個項目的設定都可分別地按照已定義好的設定儲存。
• 對EXT輸出目錄進行備份。萬一出現狀況也可復原到之前的版本而無須重建。
• 開啟每個 .jsb檔案並產生
• 對新版本的Ext進行測試

JSB控制台（Console）

JSB亦提供方便的命令列的控制台版本。利用批次檔Ant腳步等自動化產生版本時，Console就顯得很有用。使用JSB的控制台也是非常簡單的：

產生步驟

1. 開啟Windows的命令提示字元command prompt。
2. 進入JSB安裝目錄（或加入system path）。
3. 加入參數/path 指定.jsb 檔案的路徑運行 JSBuildConsole.exe如需指定輸出目錄，須加入 /output 的參數（如不指定它會使用.jsb裡面指定的預設輸出路徑）。 運行JSBuildConsole /?可得到所有參數的協助。舉例：
   JSBuildConsole /path=c:\svn\ext\branches\ext2.0\src\ext.jsb /output=c:\inetpub\wwwroot\ext\deploy
4. 重複每個需要產生的.jsb檔案

自動化指令碼

像本文開頭所提及的那樣，Ext SVN Builder主要用於在隨時的情況下，產生來自SVN的最新版本。而且，對於讀取.jsb格式的檔案也是毫無問題的。因為這種檔案是JS Builder項目的儲存格式，為每個項目的發布都儲存了一切的依賴關係在其中。即使這種檔案是為JS Builder而設的，但是你也可以根據自身的需求修改裡面的內容和SVN Builder配套使用（譯註：jsb使用xml儲存）。一般來說，如需要這種層面上的應用，倒不如用JS Builder, 可能更適合你的需求，我們下一節分析。

像剛才所說的Ext SVN Builder那樣，通過批處理腳步的方式使用命令列版本的JSB是提高效率的常用辦法。把下面的指令碼儲存到一個批次檔中（如"build-ext- 2.0.bat"）並設定好相應的路徑變數。路徑變數之間空白符要作適當的處理。檔案一旦建立好， 就可在資源管理員中雙擊執行或在命令列中輸入build-ext-2.0執行。示範的例子會產生三個Ext的項目，並有詳盡的登陸過程和會把之前產生的檔案刪除。

echo off
set JSB="C:\JS Builder\JSBuildConsole.exe"
set EXT_PATH="C:\SVN\Ext\branches\ext2.0"
set OUTPUT="C:\Inetpub\wwwroot\deploy\ext-2.0"
 
set SRC=%EXT_PATH%\src\ext.jsb
set RESOURCES=%EXT_PATH%\resources\resources.jsb
set EXAMPLES=%EXT_PATH%\examples\examples.jsb
 
%JSB% /path=%SRC% /output=%OUTPUT% /clean /verbose
%JSB% /path=%RESOURCES% /output=%OUTPUT%\resources /clean /verbose
%JSB% /path=%EXAMPLES% /output=%OUTPUT%\examples  /clean /verbose

JS Builder Pros & Cons 利 弊 選擇結果

檔案管理的圖形介面 靈活配搭源檔案，伸縮性強 可自訂產生目標 方便產生未壓縮的調試版本 非Ext檔案、項目都可用於JSB 控制台console的功能也在內	只限Windows，必需有.NET 2.0環境 控制輸出路徑（GUI內的）當前不是最理想的
在Windows上， 毫無疑問JSB的GUI和控制台是當仁不讓的選擇。Mac/Unix使用者來說，Ext SVN Builder是您最佳的選擇。

部署

在項目開發與測試期間，你很可能會部署一次未壓縮的JS檔案以備調試。當你在用壓縮版的JS檔案時遇到了錯誤，－這幾乎一個不可能跳過的步驟， 所給出的錯誤資訊總是不太精確和有用。線上的Builder沒有提供輸出未壓縮的版本。Ext SVN Builder就可選地輸出標準ext-all-debug.js，大多數情況已是按照預設去做。如果你打算產生你自訂的目標版本，JSB GUI就是這樣的一個方案。

一般來說，在開發過程中應堅持使用ext-all-debug.js作為一種簡單的方案採用，開發最終完畢後再來制定壓縮版本的輸出。

有關JS壓縮時的注意事項

有許多壓縮、混淆JavaScript的工具可用。 JS Builder使用了JSMin（僅限文法壓縮沒有文本壓縮），對於產生開發版本，是沒有太大關係的。不過對於發布產品而言，你會考慮更好最佳化方案，由其他的工具來壓縮或是混淆。是否真得有效很可能就要看幾個變數了，盡量嘗試幾種工具的組合，比較出來的結果總是有用的。舉個例子，你可能會使用JSB輸出一個單個未壓縮的檔案，然後交給 ShrinkSafe 來負責壓縮， 在最終部署之前確定一個調優的輸出產生方案。

這裡是一些常見的JavaScript方案:

• JSMin
• Dojo ShrinkSafe
• YUI Compressor
• Dean Edwards' Packer
• JS Analytics

CompressorRater 是一個專門比較這類工具的網站，並提供一個基本的基準測評以便分析確定哪種方案。

到最終發布階段，你應該將gzip派上用場。Gzip在伺服器上（譯註：會犧牲一些CPU佔用比率）壓縮了包括JavaScript在內的檔案，使得在HTTP發送過程中是一種壓縮的狀態，到達瀏覽器的最後一秒就會解壓縮，從而節省了相當數量的傳輸負載（甚至對於裁減的檔案亦一樣），有利於你程式初始化速度的提升。