JavaScript 組件之旅（三）：用 Ant 構建組件

聽起來是不是很愜意？Let's go! 我們出發啦～

這期，我們會使用 Ant 將上期編寫、整理的代碼檔案按指定的先後順序合并成單一的源檔案，然後壓縮這個檔案。這是構建 JavaScript 項目的基本步驟。Ant 是 Apache 的一個頂級開源項目，網上對它的介紹和安裝，已經有很多文章，這裡就不再贅述了。在構建之前，我們先來看看已有的檔案布局：

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

現在，我們要讓它“豐滿”起來：

• 組件根目錄下添加：
  • README: 介紹 Smart Queue 組件
  • LICENSE: 組件的授權資訊
  • build.xml: Ant 使用的設定檔
• 組件根目錄下添加 lib 子目錄：存放構建過程中需要使用的外部程式和庫檔案
  • lib 子目錄下添加 yuicompressor.jar: 我們用 YUI Compressor 壓縮 JavaScript
• 組件根目錄下添加 test 子目錄：存放測試組件所需的檔案（下期介紹）
• src 目錄下添加 intro.js: 介紹組件的版本及說明資訊

麻雀雖小，五髒俱全。現在 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 這些名字都很容易理解外，其他可以看到的規律包括：

• project 元素的 default 屬性值對應某個 target 元素的 name 屬性；
• target 元素的 depends 屬性值對應其他某些 target 元素的 name 屬性；
• ${somename} 可以引用 property 中定義的值。

下面我們開始寫自己的 build.xml.

首先，設定項目的基本資料，以及相關目錄名稱，將要使用的編碼等等：

<project name="Smart Queue" default="compress" basedir=".">  <description>Build file for Ant</description>  <property name="src" location="src" />  <property name="build" location="build" />  <property name="lib" location="lib"/>  <property name="inputencoding" value="utf-8"/>  <property name="outputencoding" value="gbk"/>

接著，定義一個用於初始化的 target, 它負責建立 build 子目錄：

  <target name="init">    <mkdir dir="${build}"/>  </target>

然後定義名為 concat 的 target, 負責將 src 裡的 3 個 JavaScript 檔案按先後順序串連起來。運行它要先運行前面定義的 init:

  <target name="concat" depends="init">    <concat destfile="${build}/smart-queue.source.js" encoding="${inputencoding}" outputencoding="${outputencoding}">      <filelist dir="${src}" files="intro.js, lang.js, smart-queue.js" />    </concat>  </target>

這樣，就可以得到一個可以工作的 JavaScript 檔案，下面的 target 負責壓縮這個檔案，顯然它依賴於 concat, 也依賴於 init, 但是不必顯式指定對 init 的依賴——Ant 能處理這種依賴關係。這裡調用 YUI Compressor 並傳入適當的參數：

  <target name="compress" depends="concat">    <java jar="${lib}/yuicompressor.jar" fork="true">      <arg line="--type js --charset utf-8 -o ${build}/smart-queue.js ${build}/smart-queue.js"/>    </java>  </target>

大功告成，compress 處理後的檔案就可以部署到生產系統上去了。最後我們做一下清理工作，使你在組建檔案後還可以回到最初的狀態:

  <target name="clean">    <delete dir="${build}"/>  </target>

到此可以說基本的配置就寫完了。怎麼使用它呢？以命令列方式進入到組件根目錄（或者說 build.xml 所在的目錄），然後：

• 運行 ant concat, 將得到 ./build/smart-queue.source.js
• 運行 ant, 將選擇 <project> 中 default 引用的那個 target, 即 compress, 所以會得到 ./build 下的 smart-queue.source.js 和 smart-queue.js
• 運行 ant clean, 將刪除 ./build 目錄，回到最初的狀態

這些前提是你已經正確安裝或者說設定好了 JDK 和 Ant, 如果有錯誤提示出來，則可能需要檢查它們是否已準備妥當。

一路看下來，是不是覺得本期介紹的東西很簡單？那是當然了，構建工具就應該簡單易用，否則把大量的時間花在那上面豈非不值？工具的價值在於提升生產力，從而創造更多價值。

最後，你可以在這裡查看 Ant 的協助文檔（裡面有很多好玩的東東哦），也可以在這裡查看本期完整的 build.xml 檔案。