Extjs,最好的javascript,js,ajax,Web前端开发框架，一看都会被它华丽的外表所吸引。

入门

有几种方案可制定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

利 弊 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发送过程中是一种压缩的状态， 到达浏览器的最后一秒就会解压缩，从而节省了相当数量的传输负载（甚至对于裁减的文件亦一样），有利于你程序初始化速度的提升。