jQuery MiniUI,快速开发WebUI界面

教程:从源代码上建立你自己的Ext

入门有几种方案可制定Ext,制成裁减过的版本输出。而且这是至关重要的,为什么呢?

  • 只需包含你所需的文件,减少部署时文件过大的开销。
  • 你可缩小源码大小,也是部署时的重要一环。
  • 如果你是技术支持用户 有一个可用的SVN访问,你可在开发阶段中创建一个中间临时的版本,用于测试、试用新功能和官方发布新版之间的bug调试。
  • 你亦可利用一些自动化的工具,或直接整合到你惯用的自动化调用程序(如,通过Ant)。
本文主要覆盖了版本生成的三种不同方案:
  • 在线的Build Your Own 工具。针对一次性发布这是最有用的,而且无须进行安装便可轻松创建制定的文件。
  • 基于Java的,命令行的Ext SVN Builder。 能轻松地自动批处理SVN的版本,推荐Mac和Unix的用户使用。
  • 我们的JS Builder小程序。推荐给windows的用户,能提供更灵活的方案,而且略比其他方案有优势。
在线生成的版本通过这种简易的在线打包工具,任何人都可制定属于自己的EXT版本。同时这是完成这项任务最迅速和简单的方式。可是,这种方式并不包括资源文件和范例文件, 并且发布的只是当前的Ext发布版本。 该工具的主要目的是为了程序生成产品时文件部署优化。 而伸缩性更强的方案,或是说要在开发过程中的生成Ext的分支版本, 就要看看接下来的部分。

431,211
生成步骤

  1. 浏览http://extjs.com/products/extjs/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 JDK 5上的版本是已经安装的
  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全部三个复杂的项目)

选择结果
在Mac/Unix上,该工具是不二的选择。设置好你的shell脚本和一行命令以备开始生成。Windows应采用功能更好的JS Builder

JS BuilderJS Builder (简称JSB)是管理生成文件的成熟方案,而其本身就是在Ext团队内部用于发布工程版本的工具。
虽然只能在Windows .NET环境下运行,在某些场合可能会受到一些限制,但它比其它以上讨论过的生成方案有着更多的优点。
.jsb 格式的文件包含了Ext代码发布生成的信息,可用JSB的图形界面来打开与编辑.jsb 格式的文件。
JSB GUI400,241 要完整地讨论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文件
自动化脚本400,249 像本文开头所提及的那样,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方案:

CompressorRater 是一个专门比较这类工具的网站,并提供一个基本的基准测评以便分析确定哪种方案。 到最终发布阶段,你应该将gzip派上用场。Gzip在服务器上(译注:会占用一些CPU占用比率)压缩了包括JavaScript在内的文件,使得在HTTP发送过程中是一种压缩的状态,到达浏览器的最后一秒就会解压缩,从而节省了相当数量的传输负载(甚至对于裁减的文件亦一样),有利于你程序初始化速度的提升。

Author: Brian Moeskau(译者:Frank Cheung)
Retrieved from "http://extjs.com/learn/Tutorial:Building_Ext_From_Source_%28Chinese%29"