Eine Tour durch JavaScript-Komponenten: Komponenten mit Ant erstellen

Wo waren wir? Haben Sie es satt, in den ersten beiden Ausgaben zu viel nachzudenken? Keine Sorge, das Thema in dieser Ausgabe ist sehr einfach. Sie müssen nur kurz etwas Syntax verstehen und ein paar Konfigurationszeilen schreiben, und schon können Sie das System dazu bringen, einige Arbeiten automatisch gemäß Ihrer voreingestellten Methode abzuschließen. Klingt das nicht angenehm? Auf geht’s! Auf geht’s

In dieser Ausgabe werden wir Ant verwenden, um die in der vorherigen Ausgabe geschriebenen und organisierten Codedateien in der angegebenen Reihenfolge in einer einzigen Quelldatei zusammenzuführen und diese Datei dann zu komprimieren. Dies sind die grundlegenden Schritte zum Erstellen eines JavaScript-Projekts. Ant ist ein Top-Open-Source-Projekt von Apache. Es gibt viele Artikel zu seiner Einführung und Installation im Internet, daher werde ich hier nicht näher darauf eingehen. Schauen wir uns vor dem Erstellen das vorhandene Dateilayout an:

smart-queue // Das Stammverzeichnis der Komponente
+--- src // JavaScript-Quelldateiverzeichnis
+--- lang.js // Die oben erwähnte „externe Datei“.
+--- smart-queue.js // Smart Queue-Hauptdatei

Jetzt wollen wir es „voll“ machen:

• Fügen Sie im Stammverzeichnis der Komponente Folgendes hinzu:
  • README: Einführung in die Smart Queue-Komponente
  • LIZENZ: Lizenzinformationen der Komponente
  • build.xml: Von Ant verwendete Konfigurationsdatei
• Fügen Sie das Unterverzeichnis lib unter dem Stammverzeichnis der Komponente hinzu: Speichern Sie externe Programme und Bibliotheksdateien, die während des Erstellungsprozesses verwendet werden müssen
  • Fügen Sie yuicompressor.jar im Unterverzeichnis lib hinzu: Wir verwenden YUI Compressor, um JavaScript zu komprimieren
• Fügen Sie das Test-Unterverzeichnis unter dem Stammverzeichnis der Komponente hinzu: Speichern Sie die zum Testen der Komponente erforderlichen Dateien (beschrieben in der nächsten Ausgabe).
• Fügen Sie intro.js zum src-Verzeichnis hinzu: Geben Sie die Versions- und Beschreibungsinformationen der Komponente ein

Obwohl der Spatz klein ist, verfügt er über alle inneren Organe. Jetzt sieht Smart Queue wie ein professionelleres JavaScript-Projekt aus:

smart-queue // Das Stammverzeichnis der Komponente
+--- lib // Verzeichnis für externe JavaScript-Programme und Bibliotheksdateien
+--- yuicompressor.jar // YUI-Kompressor
+--- test //Dateiverzeichnis testen
+--- src // JavaScript-Quelldateiverzeichnis
+--- intro.js // Einführung und Versionsinformationen
+--- lang.js // Die oben erwähnte „externe Datei“.
+--- smart-queue.js // Smart Queue-Hauptdatei
+--- README // Komponenten-Readme-Datei
+--- LIZENZ // Informationen zur Komponentenautorisierung

Wir planen, die erstellten Dateien im Build-Unterverzeichnis des Komponentenstammverzeichnisses zu speichern und sie auch über das Build-Tool zu erstellen und zu zerstören. Bevor Sie zum ersten Mal versuchen, einen Build zu erstellen, wird empfohlen, ein allgemeines Verständnis der Struktur der Ant-Konfigurationsdatei – build.xml – zu haben:

<Projektname="MyProject" default="dist" basedir=".">
<Beschreibung>
einfache Beispiel-Build-Datei
</description>
<!-- globale Eigenschaften für diesen Build festlegen -->
<property name="src" location="src"/>
<property name="build" location="build"/>
<property name="dist" location="dist"/>

<Zielname="init">
<!-- Zeitstempel erstellen -->
<tstamp/>
<!-- Erstellen Sie die von der Kompilierung verwendete Build-Verzeichnisstruktur -->
<mkdir dir="${build}"/>
</target>

<target name="compile" depend="init"
description="Kompilieren Sie die Quelle" >
<!-- Kompilieren Sie den Java-Code von ${src} in ${build} -->
<javac srcdir="${src}" destdir="${build}"/>
</target>

<Zielname="sauber"
description="aufräumen" >
<!-- Löschen Sie die Verzeichnisbäume ${build} und ${dist} -->
<delete dir="${build}"/>
<delete dir="${dist}"/>
</target>
</Projekt>

Beobachten Sie sorgfältig. Zusätzlich zu den leicht verständlichen Namen und Beschreibungen sind unter anderem folgende Muster erkennbar.

• Der Standardattributwert des Projektelements entspricht dem Namensattribut eines bestimmten Zielelements.
• Der Wert des Attributs „Abhängig“ des Zielelements entspricht dem Attribut „Name“ einiger anderer Zielelemente.
• ${somename} kann auf den in der Eigenschaft definierten Wert verweisen.

Quelle: Alipay UED