用Ant構建JavaScript組件

來源:互聯網
上載者:User

我們走到哪兒了?前兩期思考了太多東西,你是否已有倦意?別擔心,本期的話題很輕鬆,你只需要簡單瞭解一些文法,寫幾行配置,就能驅使系統按你預設的方式自動完成一些工作。聽起來是不是很愜意?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 中定義的值。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。