ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript コンポーネントの旅 (3): Ant_Javascript スキルを使用してコンポーネントを構築する

JavaScript コンポーネントの旅 (3): Ant_Javascript スキルを使用してコンポーネントを構築する

WBOY
リリース: 2016-05-16 18:43:04
オリジナル
1242 人が閲覧しました

听起来是不是很惬意?Let's go! 我们出发啦~

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

 smart-queue <span style="COLOR: #c0c0c0">// 组件的根目录</span>
  +--- src <span style="COLOR: #c0c0c0">// JavaScript源文件目录</span>
    +--- lang.js <span style="COLOR: #c0c0c0">// 前文提到的“外部文件”</span>
    +--- smart-queue.js <span style="COLOR: #c0c0c0">// Smart Queue 主文件</span>
ログイン後にコピー

现在,我们要让它“丰满”起来:

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

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

 smart-queue <span style="COLOR: #c0c0c0">// 组件的根目录</span>
  +--- lib <span style="COLOR: #c0c0c0">// JavaScript外部程序和库文件目录</span>
    +--- yuicompressor.jar <span style="COLOR: #c0c0c0">// YUI Compressor</span>
  +--- test <span style="COLOR: #c0c0c0">// 测试文件目录</span>
  +--- src <span style="COLOR: #c0c0c0">// JavaScript源文件目录</span>
    +--- intro.js <span style="COLOR: #c0c0c0">// 介绍和版本信息</span>
    +--- lang.js <span style="COLOR: #c0c0c0">// 前文提到的“外部文件”</span>
    +--- smart-queue.js <span style="COLOR: #c0c0c0">// Smart Queue 主文件</span>
  +--- README <span style="COLOR: #c0c0c0">// 组件自述文件</span>
  +--- LICENSE <span style="COLOR: #c0c0c0">// 组件授权信息</span>
ログイン後にコピー

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

<span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">project</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">name</SPAN>=<SPAN style="COLOR: #008000">"MyProject"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">default</SPAN>=<SPAN style="COLOR: #008000">"dist"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">basedir</SPAN>=<SPAN style="COLOR: #008000">"."</SPAN><SPAN style="COLOR: #b000b0">></span>
  <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">description</SPAN><SPAN style="COLOR: #b000b0">></span>
    simple example build file
  <span style="COLOR: #b000b0"></</SPAN><SPAN style="COLOR: #c00000">description</SPAN><SPAN style="COLOR: #b000b0">></span>
 <span style="COLOR: #707070"><!</SPAN><SPAN style="COLOR: #707070">-- set global properties for this build --</SPAN><SPAN style="COLOR: #707070">></span>
 <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">property</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">name</SPAN>=<SPAN style="COLOR: #008000">"src"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">location</SPAN>=<SPAN style="COLOR: #008000">"src"</SPAN><SPAN style="COLOR: #b000b0">/></span>
 <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">property</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">name</SPAN>=<SPAN style="COLOR: #008000">"build"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">location</SPAN>=<SPAN style="COLOR: #008000">"build"</SPAN><SPAN style="COLOR: #b000b0">/></span>
 <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">property</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">name</SPAN>=<SPAN style="COLOR: #008000">"dist"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">location</SPAN>=<SPAN style="COLOR: #008000">"dist"</SPAN><SPAN style="COLOR: #b000b0">/></span>

 <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">target</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">name</SPAN>=<SPAN style="COLOR: #008000">"init"</SPAN><SPAN style="COLOR: #b000b0">></span>
  <span style="COLOR: #707070"><!</SPAN><SPAN style="COLOR: #707070">-- Create the time stamp --</SPAN><SPAN style="COLOR: #707070">></span>
  <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">tstamp</SPAN><SPAN style="COLOR: #b000b0">/></span>
  <span style="COLOR: #707070"><!</SPAN><SPAN style="COLOR: #707070">-- Create the build directory structure used by compile --</SPAN><SPAN style="COLOR: #707070">></span>
  <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">mkdir</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">dir</SPAN>=<SPAN style="COLOR: #008000">"${build}"</SPAN><SPAN style="COLOR: #b000b0">/></span>
 <span style="COLOR: #b000b0"></</SPAN><SPAN style="COLOR: #c00000">target</SPAN><SPAN style="COLOR: #b000b0">></span>

 <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">target</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">name</SPAN>=<SPAN style="COLOR: #008000">"compile"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">depends</SPAN>=<SPAN style="COLOR: #008000">"init"</SPAN>
<SPAN style="COLOR: #b000b0">    </SPAN><SPAN style="COLOR: #0000c0">description</SPAN>=<SPAN style="COLOR: #008000">"compile the source "</SPAN><SPAN style="COLOR: #b000b0"> ></span>
  <span style="COLOR: #707070"><!</SPAN><SPAN style="COLOR: #707070">-- Compile the java code from ${src} into ${build} --</SPAN><SPAN style="COLOR: #707070">></span>
  <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">javac</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">srcdir</SPAN>=<SPAN style="COLOR: #008000">"${src}"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">destdir</SPAN>=<SPAN style="COLOR: #008000">"${build}"</SPAN><SPAN style="COLOR: #b000b0">/></span>
 <span style="COLOR: #b000b0"></</SPAN><SPAN style="COLOR: #c00000">target</SPAN><SPAN style="COLOR: #b000b0">></span>

 <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">target</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">name</SPAN>=<SPAN style="COLOR: #008000">"clean"</SPAN>
<SPAN style="COLOR: #b000b0">    </SPAN><SPAN style="COLOR: #0000c0">description</SPAN>=<SPAN style="COLOR: #008000">"clean up"</SPAN><SPAN style="COLOR: #b000b0"> ></span>
  <span style="COLOR: #707070"><!</SPAN><SPAN style="COLOR: #707070">-- Delete the ${build} and ${dist} directory trees --</SPAN><SPAN style="COLOR: #707070">></span>
  <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">delete</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">dir</SPAN>=<SPAN style="COLOR: #008000">"${build}"</SPAN><SPAN style="COLOR: #b000b0">/></span>
  <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">delete</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">dir</SPAN>=<SPAN style="COLOR: #008000">"${dist}"</SPAN><SPAN style="COLOR: #b000b0">/></span>
 <span style="COLOR: #b000b0"></</SPAN><SPAN style="COLOR: #c00000">target</SPAN><SPAN style="COLOR: #b000b0">></span>
<span style="COLOR: #b000b0"></</SPAN><SPAN style="COLOR: #c00000">project</SPAN><SPAN style="COLOR: #b000b0">></span>
ログイン後にコピー

仔细观察一下,除了 <font face="新宋体">name, description</font> 这些名字都很容易理解外,其他可以看到的规律包括:

  • <font face="新宋体">project</font> 元素的 <font face="新宋体">default</font> 属性值对应某个 <font face="新宋体">target</font> 元素的 <font face="新宋体">name</font> 属性;
  • <font face="新宋体">target</font> 元素的 <font face="新宋体">depends</font> 属性值对应其他某些 <font face="新宋体">target</font> 元素的 <font face="新宋体">name</font> 属性;
  • <font face="新宋体">${somename}</font> 可以引用 <font face="新宋体">property</font> 中定义的值。

下面我们开始写自己的 build.xml.

首先,配置项目的基本信息,以及相关目录名称,将要使用的编码等等:

<span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">project</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">name</SPAN>=<SPAN style="COLOR: #008000">"Smart Queue"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">default</SPAN>=<SPAN style="COLOR: #008000">"compress"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">basedir</SPAN>=<SPAN style="COLOR: #008000">"."</SPAN><SPAN style="COLOR: #b000b0">></span>
  <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">description</SPAN><SPAN style="COLOR: #b000b0">></span>Build file for Ant<span style="COLOR: #b000b0"></</SPAN><SPAN style="COLOR: #c00000">description</SPAN><SPAN style="COLOR: #b000b0">></span>
  <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">property</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">name</SPAN>=<SPAN style="COLOR: #008000">"src"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">location</SPAN>=<SPAN style="COLOR: #008000">"src"</SPAN><SPAN style="COLOR: #b000b0"> /></span>
  <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">property</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">name</SPAN>=<SPAN style="COLOR: #008000">"build"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">location</SPAN>=<SPAN style="COLOR: #008000">"build"</SPAN><SPAN style="COLOR: #b000b0"> /></span>
  <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">property</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">name</SPAN>=<SPAN style="COLOR: #008000">"lib"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">location</SPAN>=<SPAN style="COLOR: #008000">"lib"</SPAN><SPAN style="COLOR: #b000b0">/></span>
  <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">property</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">name</SPAN>=<SPAN style="COLOR: #008000">"inputencoding"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">value</SPAN>=<SPAN style="COLOR: #008000">"utf-8"</SPAN><SPAN style="COLOR: #b000b0">/></span>
  <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">property</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">name</SPAN>=<SPAN style="COLOR: #008000">"outputencoding"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">value</SPAN>=<SPAN style="COLOR: #008000">"gbk"</SPAN><SPAN style="COLOR: #b000b0">/></span>
ログイン後にコピー

接着,定义一个用于初始化的 <font face="新宋体">target</font>, 它负责创建 build 子目录:

  <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">target</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">name</SPAN>=<SPAN style="COLOR: #008000">"init"</SPAN><SPAN style="COLOR: #b000b0">></span>
    <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">mkdir</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">dir</SPAN>=<SPAN style="COLOR: #008000">"${build}"</SPAN><SPAN style="COLOR: #b000b0">/></span>
  <span style="COLOR: #b000b0"></</SPAN><SPAN style="COLOR: #c00000">target</SPAN><SPAN style="COLOR: #b000b0">></span>
ログイン後にコピー

然后定义名为 <font face="新宋体">concat</font><font face="新宋体">target</font>, 负责将 src 里的 3 个 JavaScript 文件按先后顺序连接起来。运行它要先运行前面定义的 <font face="新宋体">init</font>:

  <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">target</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">name</SPAN>=<SPAN style="COLOR: #008000">"concat"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">depends</SPAN>=<SPAN style="COLOR: #008000">"init"</SPAN><SPAN style="COLOR: #b000b0">></span>
    <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">concat</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">destfile</SPAN>=<SPAN style="COLOR: #008000">"${build}/smart-queue.source.js"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">encoding</SPAN>=<SPAN style="COLOR: #008000">"${inputencoding}"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">outputencoding</SPAN>=<SPAN style="COLOR: #008000">"${outputencoding}"</SPAN><SPAN style="COLOR: #b000b0">></span>
      <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">filelist</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">dir</SPAN>=<SPAN style="COLOR: #008000">"${src}"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">files</SPAN>=<SPAN style="COLOR: #008000">"intro.js, lang.js, smart-queue.js"</SPAN><SPAN style="COLOR: #b000b0"> /></span>
    <span style="COLOR: #b000b0"></</SPAN><SPAN style="COLOR: #c00000">concat</SPAN><SPAN style="COLOR: #b000b0">></span>
  <span style="COLOR: #b000b0"></</SPAN><SPAN style="COLOR: #c00000">target</SPAN><SPAN style="COLOR: #b000b0">></span>
ログイン後にコピー

这样,就可以得到一个可以工作的 JavaScript 文件,下面的 <font face="新宋体">target</font> 负责压缩这个文件,显然它依赖于 <font face="新宋体">concat</font>, 也依赖于 <font face="新宋体">init</font>, 但是不必显式指定对 <font face="新宋体">init</font> 的依赖——Ant 能处理这种依赖关系。这里调用 YUI Compressor 并传入适当的参数:

  <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">target</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">name</SPAN>=<SPAN style="COLOR: #008000">"compress"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">depends</SPAN>=<SPAN style="COLOR: #008000">"concat"</SPAN><SPAN style="COLOR: #b000b0">></span>
    <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">java</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">jar</SPAN>=<SPAN style="COLOR: #008000">"${lib}/yuicompressor.jar"</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">fork</SPAN>=<SPAN style="COLOR: #008000">"true"</SPAN><SPAN style="COLOR: #b000b0">></span>
      <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">arg</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">line</SPAN>=<SPAN style="COLOR: #008000">"--type js --charset utf-8 -o ${build}/smart-queue.js ${build}/smart-queue.js"</SPAN><SPAN style="COLOR: #b000b0">/></span>
    <span style="COLOR: #b000b0"></</SPAN><SPAN style="COLOR: #c00000">java</SPAN><SPAN style="COLOR: #b000b0">></span>
  <span style="COLOR: #b000b0"></</SPAN><SPAN style="COLOR: #c00000">target</SPAN><SPAN style="COLOR: #b000b0">></span>
ログイン後にコピー

大功告成,<font face="新宋体">compress</font> 处理后的文件就可以部署到生产系统上去了。最后我们做一下清理工作,使你在生成文件后还可以回到最初的状态:

  <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">target</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">name</SPAN>=<SPAN style="COLOR: #008000">"clean"</SPAN><SPAN style="COLOR: #b000b0">></span>
    <span style="COLOR: #b000b0"><</SPAN><SPAN style="COLOR: #c00000">delete</SPAN><SPAN style="COLOR: #b000b0"> </SPAN><SPAN style="COLOR: #0000c0">dir</SPAN>=<SPAN style="COLOR: #008000">"${build}"</SPAN><SPAN style="COLOR: #b000b0">/></span>
  <span style="COLOR: #b000b0"></</SPAN><SPAN style="COLOR: #c00000">target</SPAN><SPAN style="COLOR: #b000b0">></span>
ログイン後にコピー

到此可以说基本的配置就写完了。怎么使用它呢?以命令行方式进入到组件根目录(或者说 build.xml 所在的目录),然后:

  • 运行 <font face="新宋体">ant concat</font>, 将得到 ./build/smart-queue.source.js
  • 运行 <font face="新宋体">ant</font>, 将选择 <font face="新宋体"><project></font><font face="新宋体">default</font> 引用的那个 <font face="新宋体">target</font>, 即 <font face="新宋体">compress</font>, 所以会得到 ./build 下的 smart-queue.source.js 和 smart-queue.js
  • 运行 <font face="新宋体">ant clean</font>, 将删除 ./build 目录,回到最初的状态

这些前提是你已经正确安装或者说设置好了 JDK 和 Ant, 如果有错误提示出来,则可能需要检查它们是否已准备妥当。

一路看下来,是不是觉得本期介绍的东西很简单?那是当然了,构建工具就应该简单易用,否则把大量的时间花在那上面岂非不值?工具的价值在于提升生产力,从而创造更多价值。

最後に、Ant のヘルプ ドキュメントは こちら (楽しいものがたくさんあります) で見ることができます。または、こちらから見ることもできます この問題の完全な build.xml ファイルを表示します。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート