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

Posted 周三, 05/27/2009 - 08:46 by admin

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

  • 要发表评论，请先登录