JavaScript组件之旅:用Ant构建组件

我们走到哪儿了？前两期思考了太多东西，你是否已有倦意？别担心，本期的话题很轻松，你只需要简单了解一些语法，写几行配置，就能驱使系统按你预设的方式自动完成一些工作。听起来是不是很惬意？Let’s go! 我们出发啦～

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

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

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

• 组件根目录下添加：
  • README: 介绍 Smart Queue 组件
  • LICENSE: 组件的授权信息
  • bu***.xml: Ant 使用的配置文件
• 组件根目录下添加 lib 子目录：存放构建过程中需要使用的外部程序和库文件
  • lib 子目录下添加 yu***mpressor.jar: 我们用 YUI Compressor 压缩 JavaScript
• 组件根目录下添加 test 子目录：存放测试组件所需的文件（下期介绍）
• src 目录下添加 in***.js: 介绍组件的版本及说明信息

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

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

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

   
        simple example build file
   
 
 
 
 

          description="compile the source " >
   
   
 

          description="clean up" >
   
   
   
 

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

• project 元素的 default 属性值对应某个 target 元素的 name 属性；
• target 元素的 depends 属性值对应其他某些 target 元素的 name 属性；
• ${somename} 可以引用 property 中定义的值。

出处：Alipay UED