Apakah alat pembungkusan bahagian hadapan web?

Alat pembungkusan bahagian hadapan web termasuk: 1. Webpack, yang merupakan alat pengurusan modular dan alat pembungkusan yang boleh membungkus dan menyepadukan fail daripada modul yang berbeza, dan memastikan bahawa rujukan antara mereka adalah betul dan pelaksanaannya adalah teratur; 2 , Grunt, alat pembungkusan dan binaan bahagian hadapan; 6. equireJS ialah fail JS dan pemuat modul.

Persekitaran pengendalian tutorial ini: sistem Windows 7, komputer Dell G3.

Alat pembungkusan bahagian hadapan web

1 alat pengurusan modular dan alat pembungkusan, yang tujuannya ialah semua sumber statik boleh dibungkus. Anda boleh membungkus dan menyepadukan fail daripada modul yang berbeza, dan memastikan bahawa rujukan di antara mereka adalah betul dan pelaksanaannya teratur. Apabila webpack memproses aplikasi anda, ia membina graf pergantungan secara dalaman, memetakan setiap modul yang diperlukan oleh projek dan menjana satu atau lebih berkas.

Melalui penukaran pemuat, sebarang bentuk sumber boleh dianggap sebagai modul, seperti modul CommonJs, modul AMD, modul ES6, CSS, imej, dll. Ia boleh membungkus banyak modul longgar ke dalam sumber bahagian hadapan yang konsisten dengan penggunaan persekitaran pengeluaran mengikut kebergantungan dan peraturan. Anda juga boleh memisahkan kod modul yang dimuatkan atas permintaan dan memuatkannya secara tidak segerak apabila ia benar-benar diperlukan. Ia diletakkan sebagai pembungkus modul, manakala Gulp/Grunt ialah alat binaan. Webpack boleh menggantikan beberapa fungsi Gulp/Grunt, tetapi ia bukan alat berfungsi dan boleh digunakan bersama-sama dengannya.

Webpack menyokong semua pilihan modul popular dan telah menjadi sinonim dengan pembangunan React. Walaupun Webpack mendakwa sebagai pengikat modul, ia sudah boleh digunakan sebagai pelari tugas universal.

2. Grunt

Grunt: Alat pembungkusan tertua untuk menulis skrip pembungkusan, jadi akan ada lagi konfigurasi. Item, seperti pilihan, src, dest, dsb. Selain itu, pemalam yang berbeza mungkin mempunyai medan sambungannya sendiri, yang memerlukan kos kognitif yang tinggi Apabila menggunakannya, anda perlu memahami peraturan konfigurasi pelbagai pemalam.

3. Gulp

Gulp: Gunakan kod untuk menulis skrip pembungkusan, dan kod ditulis dalam gaya aliran, hanya gulp.src, gulp.pipe diabstraksikan , antara muka gulp.dest, gulp.watch agak mudah untuk digunakan. Ia lebih mudah untuk dipelajari dan digunakan, dan jumlah kod yang menggunakan tegukan boleh dikurangkan kira-kira separuh berbanding dengan dengusan. (PS: Pengenalan ini adalah untuk gulp3 dan tidak tersedia dalam gulp4)

4 Rollup

Rollup: alat modular ES6 generasi seterusnya, sorotan terbesar ialah. penggunaan reka bentuk Modul ES6, menggunakan goncangan pokok untuk menghasilkan kod yang lebih bersih dan ringkas. Secara umumnya, gunakan Webpack untuk aplikasi dan Rollup untuk perpustakaan kelas; gunakan webpack apabila pemisahan kod (Code Splitting) diperlukan, atau banyak sumber statik perlu diproses, atau apabila projek yang dibina perlu memperkenalkan banyak kebergantungan modul CommonJS. Pangkalan kod adalah berdasarkan modul ES6, dan saya mahu kod itu boleh digunakan secara langsung oleh orang lain, menggunakan Rollup.

5. Petak

Parcel ialah "pembungkus aplikasi web konfigurasi sifar yang sangat pantas". Dalam latihan bahagian hadapan Web, sama ada pengetahuan teori atau operasi projek praktikal, akan ada pembelajaran tentang alat pembungkusan modul, supaya anda benar-benar boleh belajar menggunakan alat bahagian hadapan.

Parcel mempunyai ciri-ciri berikut:

Tidak lama lagi

• Himpunkan semua aset projek

• Tiada pemisahan kod dikonfigurasikan Semua modul disusun menjadi satu fail serasi pelayar. Ia direka bentuk berdasarkan idea aliran dan boleh digunakan melalui baris arahan atau API. Ia hanya berurusan dengan proses terbalik pemodulatan JavaScript, tetapi menggalakkan pembangunan pemodulatan yang lebih baik.

• 7. RequireJS

RequireJS ialah fail JavaScript dan pemuat modul. Ia dioptimumkan untuk kegunaan dalam penyemak imbas, tetapi boleh digunakan dalam persekitaran JavaScript lain seperti Rhino dan Node. Menggunakan pemuat skrip modular seperti RequireJS akan meningkatkan kelajuan dan kualiti kod anda.

Menguasai penggunaan alat modular bahagian hadapan ini akan menjadikan kerja anda lebih mudah dan lebih berkesan Modularisasi telah menjadi kemahiran penting untuk jurutera bahagian hadapan moden.

(Belajar perkongsian video:

bahagian hadapan web

)

Atas ialah kandungan terperinci Apakah alat pembungkusan bahagian hadapan web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!