空間站

入門

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

• 只需包含你所需的文件，減少部署時文件過大的開銷。
• 你可縮小源碼大小，也是部署時的重要一環(huán)。
• 如果你是技術(shù)支持用戶 有一個可用的SVN訪問，你可在開發(fā)階段中創(chuàng)建一個中間臨時的版本，用于測試、試用新功能和官方發(fā)布新版之間的bug調(diào)試。
• 你亦可利用一些自動化的工具，或直接整合到你慣用的自動化調(diào)用程序（如，通過Ant）。

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

• 在線的Build Your Own 工具。針對一次性發(fā)布這是最有用的，而且無須進(jìn)行安裝便可輕松創(chuàng)建制定的文件。
• 基于Java的，命令行的Ext SVN Builder。 能輕松地自動批處理SVN的版本，推薦Mac和Unix的用戶使用。
• 我們的JS Builder小程序。推薦給windows的用戶，能提供更靈活的方案，而且略比其他方案有優(yōu)勢。

在線生成的版本

通過這種簡易的方式hosted build tool，任何人都可制定屬于自己的EXT版本。同時這是完成這項(xiàng)任務(wù)最迅速和簡單的方式。可是，這種方式并不包括資源文件和范例文件，并且發(fā)布的只是當(dāng)前的Ext發(fā)布版本。 該工具的主要目的是為了程序生成產(chǎn)品時文件部署優(yōu)化。而伸縮性更強(qiáng)的方案，或是說要在開發(fā)過程中的生成Ext的分支版本， 就要看看接下來的部分。

生成步驟

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

Online Builder 利&弊

利	弊
使用簡單 迅速! 內(nèi)見依賴檢查 你無須維護(hù)和進(jìn)行安裝	整個過程手工控制，不能自動化 需要Web的訪問 生成的內(nèi)容有所限制 沒有未生成調(diào)試版本的選項(xiàng) 不能包含非Ext的文件 只限當(dāng)前發(fā)布的Ext — 不能處理開發(fā)階段中的分支版本
選擇結(jié)果
打算一次過地生成，這是一種較適合的方案，快速、簡單而且不需要任何安裝東東。 打算長期生成文件，或需要維護(hù)著發(fā)布設(shè)置， JS Builder (Windows的話) 或是 Ext SVN Builder (Mac/Unix平臺)可能是較好的方案

Ext SVN Builder

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

生成步驟

1. 確定在Java 上的版本是已經(jīng)安裝的
2. 在這里下載Ext SVN Builder程序
3. 打開控制臺或者是命令行的窗口，進(jìn)入安裝目錄并運(yùn)行：
   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"

命令行有下列的參數(shù)：

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

構(gòu)建自定義生成

像本文開頭所提及的那樣，Ext SVN Builder主要用于在隨時的情況下，生成來自SVN的最新版本。 而且， 對于讀取.jsb格式的文件也是毫無問題的。因?yàn)檫@種文件是JS Builder項(xiàng)目的保存格式， 為每個項(xiàng)目的發(fā)布都保存了一切的依賴關(guān)系在其中。即使這種文件是為JS Builder而設(shè)的，但是你也可以根據(jù)自身的需求修改里面的內(nèi)容和SVN Builder配套使用（譯注：jsb使用xml保存）。 一般來說，如需要這種層面上的應(yīng)用，倒不如用JS Builder, 可能更適合你的需求，我們下一節(jié)分析。

自動化腳本

Ext SVN Builder工具的一大優(yōu)點(diǎn)是能配合shell腳本（windows世界便是批處理文件）輕松地自動生成輸出。這樣可省下每次生成輸出時輸入路徑和記憶路徑的時間。這里就以一個簡單的例子作示范，不過當(dāng)然你應(yīng)根據(jù)當(dāng)時的情況調(diào)整腳本環(huán)境。

Unix Shell Script

正如獲取它那樣容易—只需簡單地保存相同的控制臺命令（如下）到一個文本文件，這個生成步驟就由你自己所寫的腳本調(diào)用執(zhí)行。例如， 你創(chuàng)建了一個叫做"build-ext-2.0"的文本文件包含這段腳本：

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

...你就會在控制臺里執(zhí)行，像Bourne Shell的寫法會是sh build-ext-2.0

Windows批處理文件

把下列的腳本保存為一個批處理文件（如"build-ext-2.0.bat"），并設(shè)置所需的路徑變量。路徑變量中的空白符要作適當(dāng)?shù)奶幚怼＜僭O(shè)腳本文件和builder.jar是在同一個目錄下，不過可通過設(shè)置絕對路徑解除文件位置的限制。注意Java路徑必須明確地聲明好因?yàn)榕幚碜约翰荒軓南到y(tǒng)路徑中獲取。文件創(chuàng)建好之后，在資源管理器中雙擊執(zhí)行或是命令行的方式執(zhí)行，如： 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生成 可自動導(dǎo)出壓縮和調(diào)試兩個版本 支持從SVN trunk或開放分支中生成 可shell scripting自動處理	需要安裝Java 文件內(nèi)容有一定限制 不能包含非Ext的版本 慢（因?yàn)樯婕癊xt全部三個復(fù)雜的項(xiàng)目）
Bottom Line
在Mac/Unix上，該工具是不二的選擇。設(shè)置好你的shell腳本和一行命令以備開始生成。Windows應(yīng)采用功能更好的JS Builder

JS Builder

JS Builder （簡稱JSB）是管理生成文件的成熟方案，而其本身就是在Ext團(tuán)隊(duì)內(nèi)部用于發(fā)布工程版本的工具。

雖然只能在Windows .NET環(huán)境下運(yùn)行，在某些場合可能會受到一些限制，但它比其它以上討論過的生成方案有著更多的優(yōu)點(diǎn)。

.jsb 格式的文件包含了Ext代碼發(fā)布生成的信息，可用JSB的圖形界面來打開與編輯。

JSB GUI

要完整地討論JSB的使用已經(jīng)超出了本教程的范圍。 實(shí)際上， JSB不僅有一般的壓縮/輸出功能，還可將指定的JS和CSS文件一起輸出到項(xiàng)目指定生成版本。

簡單試著創(chuàng)建一個新的項(xiàng)目，然后加入你所需的文件。在Options窗口里面有些許多的選項(xiàng)，在Project標(biāo)簽頁和Build標(biāo)簽頁里面有和項(xiàng)目輸出相關(guān)的不同設(shè)置。

接著，我們將會討論怎么更有效地從源碼生成EXT。JSB是必需的，如果你還沒有，應(yīng)先從JSB項(xiàng)目主頁下載一個JSB。 完成后，接著就可進(jìn)行生成的工作。

生成步驟

1. Ext源文件可以是在隨便一個地方， 但原始的目錄結(jié)構(gòu)應(yīng)保持一致，不應(yīng)作目錄結(jié)構(gòu)上的改動。
2. Ext \trunk （或是 \branches\ext2.0）下面找到 \src 文件夾，雙擊ext.jsb 啟動JSB界面。
3. 默認(rèn)下， 一切的設(shè)定就應(yīng)該像Ext團(tuán)隊(duì)般的設(shè)定。在Build Settings'標(biāo)簽頁下面的Output Directory的值要改為你自己的目錄。這是輸出文件所在的根目錄。
4. 點(diǎn)擊Build Project 按鈕（右手邊最后的菜單按鈕）或從菜單選擇 select Build > Build Project 。這樣就會開始生成文件，在輸出的目錄中將會看到這些文件。
5. 按照情況重復(fù)執(zhí)行三個.jsb 文件（其它的在\resources 和\examples）。

在Build Settings標(biāo)簽頁的底部看起有一些列表是列出輸出文件的，這些就是“輸出目標(biāo)”，或是將多個源文件捆綁成為輸出文件。其目的在于創(chuàng)建在用一個程序中以不同的功能區(qū)分的多個包的版本。你注意到了 ext.jsb那一項(xiàng)是"Everything" — 這是定義了許多人默認(rèn)使用Extext-all.js的版本。你可根據(jù)自身的需求來編輯這些輸出目標(biāo)。按照這種方式來管理你的項(xiàng)目是一個不錯的方式—你可將全部的JavaScript的程序代碼整合到單獨(dú)一個文件中去。

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

• 從SVN上更新Ext源碼到本地。
  如果你編輯過任何的文件（包括.jsb文件），那么必須先刪除或移動這些文件— SVN不會覆蓋這些文件。 注意： 基于當(dāng)前的實(shí)現(xiàn)， 如果你打算自定義輸出的目錄， 你要每次編輯這項(xiàng)設(shè)定因?yàn)樗械脑O(shè)定都保存在 .jsb 文件中，而這個文件總是由SVN更新的。該功能可能會在未來的版本中改進(jìn)，實(shí)現(xiàn)每個項(xiàng)目的設(shè)置都可分別地按照已定義好的設(shè)置保存。
• 對EXT輸出目錄進(jìn)行備份。萬一出現(xiàn)狀況也可回滾到之前的版本而無須重建。
• 打開每個 .jsb文件并生成
• 對新版本的Ext進(jìn)行測試

JSB控制臺（Console）

JSB亦提供方便的命令行的控制臺版本。利用批處理文件Ant腳步等自動化生成版本時，Console就顯得很有用。使用JSB的控制臺也是非常簡單的：

生成步驟

1. 打開Windows的命令提示符command prompt。
2. 進(jìn)入JSB安裝目錄（或加入system path）。
3. 加入?yún)?shù)/path 指定.jsb 文件的路徑運(yùn)行 JSBuildConsole.exe如需指定輸出目錄，須加入 /output 的參數(shù)（如不指定它會使用.jsb里面指定的默認(rèn)輸出路徑）。 運(yùn)行JSBuildConsole /?可得到所有參數(shù)的幫助。舉例：
   JSBuildConsole /path=c:\svn\ext\branches\ext2.0\src\ext.jsb /output=c:\inetpub\wwwroot\ext\deploy
4. 重復(fù)每個需要生成的.jsb文件

自動化腳本

像本文開頭所提及的那樣，Ext SVN Builder主要用于在隨時的情況下，生成來自SVN的最新版本。 而且，對于讀取.jsb格式的文件也是毫無問題的。因?yàn)檫@種文件是JS Builder項(xiàng)目的保存格式，為每個項(xiàng)目的發(fā)布都保存了一切的依賴關(guān)系在其中。即使這種文件是為JS Builder而設(shè)的，但是你也可以根據(jù)自身的需求修改里面的內(nèi)容和SVN Builder配套使用（譯注：jsb使用xml保存）。 一般來說，如需要這種層面上的應(yīng)用，倒不如用JS Builder, 可能更適合你的需求，我們下一節(jié)分析。

像剛才所說的Ext SVN Builder那樣，通過批處理腳步的方式使用命令行版本的JSB是提高效率的常用辦法。把下面的腳本保存到一個批處理文件中（如"build-ext-2.0.bat"）并設(shè)置好相應(yīng)的路徑變量。路徑變量之間空白符要作適當(dāng)?shù)奶幚怼Ｎ募坏﹦?chuàng)建好， 就可在資源管理器中雙擊執(zhí)行或在命令行中輸入build-ext-2.0執(zhí)行。演示的例子會生成三個Ext的項(xiàng)目，并有詳盡的登陸過程和會把之前生成的文件刪除。

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

利	弊
文件管理的圖形界面 靈活配搭源文件，伸縮性強(qiáng) 可自定義生成目標(biāo) 方便生成未壓縮的調(diào)試版本 非Ext文件、項(xiàng)目都可用于JSB 控制臺console的功能也在內(nèi)	只限Windows，必需有.NET 2.0環(huán)境 控制輸出路徑（GUI內(nèi)的）當(dāng)前不是最理想的
選擇結(jié)果
在Windows上， 毫無疑問JSB的GUI和控制臺是當(dāng)仁不讓的選擇。Mac/Unix用戶來說，Ext SVN Builder是您最佳的選擇。

部署

在項(xiàng)目開發(fā)和測試期間，你很可能會部署一次未壓縮的JS文件以備調(diào)試。當(dāng)你在用壓縮版的JS文件時遇到了錯誤，－這幾乎一個不可能跳過的步驟， 所給出的錯誤信息總是不太精確和有用。在線的Builder沒有提供輸出未壓縮的版本。Ext SVN Builder就可選地輸出標(biāo)準(zhǔn)ext-all-debug.js，大多數(shù)情況已是按照默認(rèn)去做。如果你打算生成你自定義的目標(biāo)版本，JSB GUI就是這樣的一個方案。

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

有關(guān)JS壓縮時的注意事項(xiàng)

有許多壓縮、混淆JavaScript的工具可用。 JS Builder使用了JSMin（僅限語法壓縮沒有文本壓縮），對于生成開發(fā)版本，是沒有太大關(guān)系的。不過對于發(fā)布產(chǎn)品而言，你會考慮更好優(yōu)化方案，由其他的工具來壓縮或是混淆。是否真得有效很可能就要看幾個變量了，盡量嘗試幾種工具的組合，比較出來的結(jié)果總是有用的。舉個例子，你可能會使用JSB輸出一個單個未壓縮的文件，然后交給 ShrinkSafe 來負(fù)責(zé)壓縮， 在最終部署之前確定一個調(diào)優(yōu)的輸出生成方案。

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

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

CompressorRater 是一個專門比較這類工具的網(wǎng)站，并提供一個基本的基準(zhǔn)測評以便分析確定哪種方案。

到最終發(fā)布階段，你應(yīng)該將gzip派上用場。Gzip在服務(wù)器上（譯注：會犧牲一些CPU占用比率）壓縮了包括JavaScript在內(nèi)的文件，使得在HTTP發(fā)送過程中是一種壓縮的狀態(tài)，到達(dá)瀏覽器的最后一秒就會解壓縮，從而節(jié)省了相當(dāng)數(shù)量的傳輸負(fù)載（甚至對于裁減的文件亦一樣），有利于你程序初始化速度的提升。

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