Tur Komponen JavaScript: Membangun Komponen dengan Ant

Kemana saja kita tadi? Apakah Anda lelah karena terlalu banyak berpikir pada dua edisi pertama? Jangan khawatir, topik dalam edisi ini sangat mudah. ​​Anda hanya perlu memahami secara singkat beberapa sintaks dan menulis beberapa baris konfigurasi, dan Anda dapat menggerakkan sistem untuk menyelesaikan beberapa pekerjaan secara otomatis sesuai dengan metode yang telah Anda tentukan. Bukankah itu terdengar menyenangkan? Ayo pergi! Ayo berangkat~

Dalam edisi ini, kami akan menggunakan Ant untuk menggabungkan file kode yang ditulis dan diatur di edisi sebelumnya menjadi satu file sumber dalam urutan yang ditentukan, lalu mengompresi file ini. Ini adalah langkah dasar untuk membangun proyek JavaScript. Ant adalah proyek sumber terbuka teratas Apache. Ada banyak artikel tentang pengenalan dan pemasangannya di Internet, jadi saya tidak akan membahas detailnya di sini. Sebelum membangun, mari kita lihat tata letak file yang ada:

smart-queue // Direktori root komponen
+--- src // Direktori file sumber JavaScript
+--- lang.js // "File eksternal" yang disebutkan di atas
+--- smart-queue.js // File utama Antrian Cerdas

Sekarang, kami ingin membuatnya "penuh":

• Tambahkan direktori root komponen:
  • README: Memperkenalkan komponen Smart Queue
  • LISENSI: Informasi lisensi komponen
  • build.xml: File konfigurasi yang digunakan oleh Ant
• Tambahkan subdirektori lib di bawah direktori root komponen: simpan program eksternal dan file perpustakaan yang perlu digunakan selama proses pembangunan
  • Tambahkan yuicompressor.jar di subdirektori lib: Kami menggunakan Kompresor YUI untuk mengompresi JavaScript
• Tambahkan subdirektori pengujian di bawah direktori akar komponen: simpan file yang diperlukan untuk menguji komponen (dijelaskan dalam edisi berikutnya)
• Tambahkan intro.js ke direktori src: perkenalkan informasi versi dan deskripsi komponen

Meskipun burung pipit berukuran kecil, ia memiliki semua organ dalam. Sekarang Smart Queue terlihat seperti proyek JavaScript yang lebih profesional:

smart-queue // Direktori root komponen
+--- lib // Program eksternal JavaScript dan direktori file perpustakaan
+--- yuicompressor.jar // Kompresor YUI
+--- test //Menguji direktori file
+--- src // Direktori file sumber JavaScript
+--- intro.js // Pendahuluan dan informasi versi
+--- lang.js // "File eksternal" yang disebutkan di atas
+--- smart-queue.js // File utama Antrian Cerdas
+--- README // file readme komponen
+--- LISENSI // Informasi otorisasi komponen

Kami berencana untuk menyimpan file yang dibuat di subdirektori build di bawah direktori root komponen, dan juga membuat dan menghancurkannya melalui alat build. Sebelum mencoba membangun untuk pertama kalinya, disarankan untuk memiliki pemahaman umum tentang struktur file konfigurasi Ant - build.xml:

<nama proyek="Proyek Saya" default="dist" basedir=".">
<deskripsi>
contoh sederhana file build
</deskripsi>
<!-- mengatur properti global untuk build ini -->
<nama properti="src" location="src"/>
<nama properti="membangun" lokasi="membangun"/>
<nama properti="dist" location="dist"/>

<nama target="init">
<!-- Buat stempel waktu -->
<cap/>
<!-- Buat struktur direktori build yang digunakan oleh kompilasi -->
<mkdir dir="${build}"/>
</target>

<nama target = "kompilasi" tergantung = "init"
deskripsi="kompilasi sumber" >
<!-- Kompilasi kode java dari ${src} ke ${build} -->
<javac srcdir="${src}" destdir="${build}"/>
</target>

<nama target="bersih"
deskripsi="bersihkan" >
<!-- Hapus pohon direktori ${build} dan ${dist} -->
<hapus dir="${build}"/>
<hapus dir="${dist}"/>
</target>
</proyek>

Perhatikan baik-baik, Selain nama dan deskripsi yang mudah dipahami, pola lain yang dapat dilihat antara lain:

• Nilai atribut default elemen proyek sesuai dengan atribut nama elemen target tertentu;
• Nilai atribut depend dari elemen target sesuai dengan atribut nama beberapa elemen target lainnya;
• ${somename} dapat merujuk ke nilai yang ditentukan dalam properti.

Sumber: Alipay UED