JavaScript 组件之旅（三）：用 Ant 构建组件

这期，我们会使用 Ant 将上期编写、整理的代码文件按指定的先后顺序合并成单一的源文件，然后压缩这个文件。这是构建 JavaScript 项目的基本步骤。Ant 是 Apache 的一个顶级开源项目，网上对它的介绍和安装，已经有很多文章，这里就不再赘述了。在构建之前，我们先来看看已有的文件布局：

 smart-queue // 组件的根目录  +--- src // JavaScript源文件目录    +--- lang.js // 前文提到的“外部文件”    +--- smart-queue.js // Smart Queue 主文件

现在，我们要让它“丰满”起来：

麻雀虽小，五脏俱全。现在 Smart Queue 看上去像是比较专业的 JavaScript 项目了：

 smart-queue // 组件的根目录  +--- lib // JavaScript外部程序和库文件目录    +--- yuicompressor.jar // YUI Compressor  +--- test // 测试文件目录  +--- src // JavaScript源文件目录    +--- intro.js // 介绍和版本信息    +--- lang.js // 前文提到的“外部文件”    +--- smart-queue.js // Smart Queue 主文件  +--- README // 组件自述文件  +--- LICENSE // 组件授权信息

我们计划将构建出来的文件存放到组件根目录下的 build 子目录，还要通过构建工具创建并销毁它。首次尝试构建前，建议先大概了解一下 Ant 的配置文件——build.xml 的结构：

<project name="MyProject" default="dist" basedir=".">  <description>    simple example build file  </description> <!-- set global properties for this build --> <property name="src" location="src"/> <property name="build" location="build"/> <property name="dist" location="dist"/> <target name="init">  <!-- Create the time stamp -->  <tstamp/>  <!-- Create the build directory structure used by compile -->  <mkdir dir="${build}"/> </target> <target name="compile" depends="init"    description="compile the source " >  <!-- Compile the java code from ${src} into ${build} -->  <javac srcdir="${src}" destdir="${build}"/> </target> <target name="clean"    description="clean up" >  <!-- Delete the ${build} and ${dist} directory trees -->  <delete dir="${build}"/>  <delete dir="${dist}"/> </target></project>

仔细观察一下，除了 name, description 这些名字都很容易理解外，其他可以看到的规律包括：