Proyek -proyek sebelumnya telah dibangun menggunakan Grunt, dan kemudian digunakan oleh Persyaratan untuk membuat modular. Pejabat Persyaratan menyediakan plug-in kasar untuk kompresi dan penggabungan. Proyek saat ini telah mencapai Gulp, dan menggunakan Seajs dalam modularitas, jadi tentu saja saya juga memikirkan masalah penggabungan dan kompresi modul.
Kemudian ketika saya pertama kali menyelesaikan masalah ini, itu tidak terlalu mulus. Tidak ada plug-in Gulp yang sangat populer untuk penggabungan dan kompresi di NPM. Meskipun saya juga membaca banyak masalah di Seajs GitHub, kebanyakan dari mereka hanya dapat menggabungkan semua file modul menjadi file total. Ini jelas tidak ada masalah untuk aplikasi satu halaman. Namun, untuk aplikasi multi-halaman, itu jelas melanggar inti pemuatan sesuai permintaan dalam ide modularitas, jadi yang saya inginkan adalah metode yang dapat menggabungkan sesuai permintaan berdasarkan modul yang diandalkan setiap halaman.
Arti penggabungan sesuai permintaan ini adalah bahwa di satu sisi, itu hanya menggabungkan modul yang diandalkan halaman, dan di sisi lain, itu juga dapat menyaring beberapa modul yang tidak berpartisipasi dalam penggabungan. Alasan untuk mempertimbangkan ini adalah bahwa beberapa modul, seperti jQuery, semuanya adalah perpustakaan yang bergantung pada pihak ketiga, dan mungkin memiliki file besar. Yang paling penting adalah Anda hampir tidak akan mengubah kodenya, jadi jika modul -modul ini tidak digabungkan ke dalam JS halaman, itu akan membantu untuk lebih memanfaatkan cache browser. Artikel ini memperkenalkan metode yang sederhana dan layak untuk melakukan kompresi gabungan Seajs dalam proyek-proyek kecil dan menengah yang dibangun di atas Gulp.
CATATAN: Untuk mengilustrasikan efek Seajs Gabungan, artikel ini memberikan demo demonstrasi, yang memiliki dua halaman: login.html dan regist.html, yang digunakan untuk mensimulasikan dua file independen dalam aplikasi multi-halaman. Anda dapat melihatnya melalui tautan berikut:
http://liuyunzhuge.github.io/blog/seajs/dist/html/login.html
http://liuyunzhuge.github.io/blog/seajs/dist/html/regist.html
Mengambil login.html sebagai contoh, saat melihat file sumber halaman ini, Anda akan melihat bahwa selain merujuk pada Seajs dan file konfigurasi terkait Common.js, itu hanya merujuk aplikasi/login sebagai JS utama halaman. Modul Aplikasi/Login ini sebenarnya sesuai dengan JS/App/Login.js:
Namun pada kenyataannya, login.js ini bergantung pada lebih banyak modul JS, dan Anda dapat melihat sumber daya JS terperinci yang dimuat oleh halaman ini melalui sumber Chrome:
Sebelum login.js bergabung, kodenya terlihat seperti ini:
Namun, dalam dua tangkapan layar pertama, kami tidak melihat tiga file: mod/mod1.js, mod/mod2.js, deps/fastclick.js. Selain login.js, kami juga melihat lib/bootstrap.js, lib/jQuery.js, lib/jquery.validate.js. Ini adalah efek penggabungan. Di satu sisi, modul di bawah folder JS/LIB tidak akan berpartisipasi dalam merger. Di sisi lain, sisi lain, modul lain yang diandalkan JS utama dari halaman tersebut digabungkan ke dalam file JS utama halaman.
Kode yang terkait dengan demo ini dapat dilihat melalui tautan berikut:
https://github.com/liuyunzhuge/blog/tree/master/seajs
1. Gabungkan ide
Bahkan, metode ini relatif sederhana, saya akan memperkenalkannya pada akhirnya.
1) Izinkan saya berbicara tentang struktur folder yang saya mengatur modul Seajs, yang seperti ini:
Struktur ini dipinjam dari kebutuhan dan mencoba meratakan organisasi file, yang seharusnya tidak terlalu merepotkan untuk proyek front-end berukuran kecil dan menengah. Fungsi setiap folder adalah:
1) JS/App menyimpan JS utama dari setiap halaman, pada dasarnya logika satu halaman dan satu JS
2) JS/DEPS Menyimpan modul pihak ketiga yang perlu digabungkan menjadi JS utama
3) JS/LIB Stores Modul Pihak Ketiga yang tidak perlu berpartisipasi dalam merger
4) JS/MOD menyimpan beberapa modul JS yang ditulis sendiri di setiap proyek
5) Common.js adalah file konfigurasi SEAJS.
2) Secara umum. JS, semua modul di bawah JS/LIB dikonfigurasi ke dalam opsi ALIAS, karena JS ini tidak berpartisipasi dalam penggabungan dan perlu digunakan dalam cache browser. Alias dapat memfasilitasi kami untuk memperbarui alamat pemuatan file -file ini saat memodifikasi atau meningkatkan file di bawah JS/LIB:
BASE dikonfigurasi ke folder JS. Dalam pengembangan modul, ketika saya ingin meminta modul lain, kebiasaan saya adalah menulis pengidentifikasi modul seperti MOD/MOD1 secara langsung tanpa identifikasi relatif. Bahkan jika modul yang akan didefinisikan modul di folder yang sama, ini juga mengapa saya mengatur direktori dasar ke folder JS, yang sedikit mirip dengan direktori root situs.
3) Gabungkan Ide: Terutama memanfaatkan dua plugin Gulp: Gulp-seajs-Transport dan Gulp-seajs-Concat. Meskipun mereka tidak terlalu populer di GitHub, mereka telah memecahkan masalah saya dengan baik dan sangat mudah digunakan:
(Untuk konten lainnya, Anda perlu memeriksa tautan kode sumber yang disediakan di awal artikel ini untuk menemukan file GulpFile.js yang relevan)
Gulp-seajs-Transport dapat membantu Anda mengubah file modul Seajs dari modul anonim ke modul bernama. Misalnya, JS/Mod/Mod1.js terlihat seperti ini sebelum membangun:
Tetapi setelah pemrosesan transportasi, itu akan menjadi:
Ini adalah titik yang lebih kritis dalam pekerjaan penggabungan Seajs. Ini tidak seperti persyaratan, lakukan saja concat secara langsung; Pertama -tama harus diproses dengan tugas transportasi, mengubah modul anonim menjadi modul bernama, dan menggunakan parameter kedua define untuk menggambarkan semua dependensi modul ini, seperti halnya kebutuhan. Hanya setelah menyelesaikan transportasi dapat menelan seajs-concat digunakan untuk penggabungan. Untuk alasan, silakan merujuk ke: https://github.com/seajs/seajs/issues/426.
Ketika Gulp-Seajs-Concat digabungkan, itu sangat sederhana. Katakan saja opsi dasar. Opsi dasar ini konsisten dengan opsi dasar di JS/Common.js. Karena Gulp-Seajs-Concat dapat menemukan file modul lain yang tergantung pada modul setelah pangkalan dan transportasi.
4) Metode ini harus digunakan saat menggunakan JS utama pada halaman:
Nama parameter penggunaan harus konsisten dengan ID modul utama dari JS utama yang digabungkan. Misalnya, setelah JS/APP/LOGIN.JS menggabungkan, sepertinya ini:
Modul Define First yang sesuai adalah modul utama dalam file gabungan. Konten kotak merah adalah ID dari modul utama. Ketika Seajs menggunakan modul, nama parameter harus sama dengan ID ini. Jika tidak, bahkan jika Seajs berhasil memuat file ini, itu tidak akan menjalankan kode apa pun dalam modul. Karena SEAJS memiliki aturan: Prinsip pencocokan ID dan jalur, yang agak terkait dengan ini, yaitu: ketika Seajs digunakan untuk berisi beberapa modul dalam file, modul utama dalam file ini akan ditemukan sesuai dengan nama parameter penggunaan. Hanya ketika mereka cocok dengan mereka dapat ditemukan.
5) Kebingungan kompresi: Gunakan gulp-uglify:
Tetapi untuk memperhatikan mudel, Anda harus mengecualikan modul ekspor yang diperlukan, jika tidak itu akan menyebabkan beberapa masalah yang tidak terduga.
2. Ringkasan artikel ini
Meskipun konten artikel ini sangat sederhana, butuh banyak waktu untuk menyelesaikan masalah artikel ini ketika saya pertama kali memotong ke Gulp dan Seajs. Meskipun kemajuannya jauh lebih halus daripada situasi saya pada waktu itu ketika saya sedang mempersiapkan demo ... tidak peduli apa, saya berharap konten artikel ini dapat membantu beberapa teman lebih atau kurang.