空間站

入門

有幾種方案可制定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平臺)可能是較好的方案

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

利	弊
跨平臺 方便快捷地從SVN生成 可自動導出壓縮和調試兩個版本 支持從SVN trunk或開放分支中生成 可shell scripting自動處理	需要安裝Java 文件內容有一定限制 不能包含非Ext的版本 慢（因為涉及Ext全部三個復雜的項目）
Bottom Line
在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發送過程中是一種壓縮的狀態，到達瀏覽器的最后一秒就會解壓縮，從而節省了相當數量的傳輸負載（甚至對于裁減的文件亦一樣），有利于你程序初始化速度的提升。

譯者姓名：Frank
譯者博客：http://www.ajaxjs.com/blog/