A Tour of JavaScript Components: Building Components with Ant

Where have we been? Are you tired from thinking too much in the first two issues? Don't worry, the topic in this issue is very easy. You only need to briefly understand some syntax and write a few lines of configuration, and you can drive the system to automatically complete some work according to your preset method. Doesn’t it sound pleasant? Let's go! Let's set off~

In this issue, we will use Ant to merge the code files written and organized in the previous issue into a single source file in the specified order, and then compress this file. These are the basic steps for building a JavaScript project. Ant is a top open source project of Apache. There are many articles on its introduction and installation on the Internet, so I won’t go into details here. Before building, let's take a look at the existing file layout:

smart-queue // The root directory of the component
+--- src // JavaScript source file directory
+--- lang.js // The "external file" mentioned above
+--- smart-queue.js // Smart Queue main file

Now, we want to make it "full":

• Add in the component root directory:
  • README: Introducing the Smart Queue component
  • LICENSE: License information of the component
  • build.xml: Configuration file used by Ant
• Add the lib subdirectory under the component root directory: store external programs and library files that need to be used during the build process
  • Add yuicompressor.jar in the lib subdirectory: We use YUI Compressor to compress JavaScript
• Add the test subdirectory under the component root directory: store the files required to test the component (described in the next issue)
• Add intro.js to the src directory: introduce the version and description information of the component

Although the sparrow is small, it has all the internal organs. Now Smart Queue looks like a more professional JavaScript project:

smart-queue // The root directory of the component
+--- lib // JavaScript external program and library file directory
+--- yuicompressor.jar // YUI Compressor
+--- test //Test file directory
+--- src // JavaScript source file directory
+--- intro.js // Introduction and version information
+--- lang.js // The "external file" mentioned above
+--- smart-queue.js // Smart Queue main file
+--- README // component readme file
+--- LICENSE // Component authorization information

We plan to store the built files in the build subdirectory under the component root directory, and also create and destroy it through the build tool. Before trying to build for the first time, it is recommended to have a general understanding of the structure of Ant's configuration file - 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>

Observe carefully. In addition to name and description, which are easy to understand, other patterns that can be seen include:

• The default attribute value of the project element corresponds to the name attribute of a certain target element;
• The depends attribute value of the target element corresponds to the name attribute of some other target elements;
• ${somename} can refer to the value defined in the property.

Source: Alipay UED