Pengenalan kepada Bundler Esbuild

Esbuild: Cepat membina alat, mengucapkan selamat tinggal kepada redundansi webpack!

Esbuild adalah alat pembungkusan berprestasi tinggi yang dapat dengan cepat mengoptimumkan kod JavaScript, TypeScript, JSX dan CSS. Artikel ini akan membimbing anda melalui Esbuild dengan cepat dan menunjukkan cara membuat sistem binaan anda sendiri tanpa kebergantungan tambahan.

mata teras:

• Kecekapan Esbuild: Esbuild jauh lebih cepat daripada alat tradisional seperti Webpack atau Rollup, dan dengan cekap dapat mengendalikan JavaScript, Typescript, JSX dan CSS.
• Kelebihan Pembungkusan: Menggunakan pakej Esbuild dapat meningkatkan prestasi kerana ia menyokong penggonaman pokok, pemeriksaan sintaks, dan mencipta output fail tunggal, yang mempercepat pemuatan dan memudahkan penyelenggaraan.
• Ciri -ciri Pembangunan: Fleksibiliti konfigurasi: menyediakan dua kaedah konfigurasi: CLI dan API, yang boleh diintegrasikan ke dalam pelbagai persekitaran pembangunan dan aliran kerja.
• Batasan dan Nota: Walaupun Esbuild berkuasa, ia masih dalam peringkat beta dan tidak mempunyai beberapa ciri, seperti pemeriksaan jenis jenis, dan alat lain diperlukan untuk menyelesaikan tugas -tugas tersebut.
• Aplikasi Praktikal: Artikel ini menyediakan contoh projek kehidupan sebenar yang menunjukkan bagaimana untuk mengkonfigurasi dan menggunakan esbuild secara berkesan untuk membina persekitaran pembangunan dan pengeluaran.
• bagaimana kerja esbuild:
Rangka kerja seperti

Vite telah mengadopsi esbuild, tetapi anda juga boleh menggunakan esbuild sebagai alat mandiri dalam projek anda sendiri.

Pakej Esbuild Kod JavaScript ke dalam satu fail dengan cara yang sama dengan alat pembungkusan seperti Rollup. Ini adalah ciri utama Esbuild, yang menghidupkan modul, melaporkan isu-isu sintaks, "getaran pokok" menghilangkan fungsi yang tidak digunakan, memadam log dan penyataan debugger, memampatkan kod dan menyediakan pemetaan sumber.

Pakej Esbuild CSS ke dalam satu fail. Ia tidak sepenuhnya menggantikan preprocessors seperti SASS atau POSTCSS, tetapi Esbuild boleh mengendalikan kod separa, masalah sintaks, bersarang, pengekodan sumber dalam talian, pemetaan sumber, awalan automatik dan pemampatan.

Ini mungkin cukup

.
Esbuild juga menyediakan pelayan pembangunan tempatan dengan pembungkusan automatik dan memuat semula panas, jadi tidak perlu menyegarkan manual. Ia tidak mempunyai semua ciri yang ditawarkan BrowserSync, tetapi ia cukup untuk kebanyakan kes.
• Kod berikut akan membantu anda memahami konsep esbuild supaya anda dapat mengkaji lebih lanjut peluang konfigurasi projek anda.
Kenapa peknya?

Terdapat beberapa faedah untuk membungkus kod ke dalam satu fail:

• boleh membangunkan fail sumber yang lebih kecil dan lebih bebas dan lebih mudah dikekalkan.
• pemeriksaan gaya kod, pemformatan kod dan pemeriksaan sintaks boleh dilakukan semasa pembungkusan.
• Alat pembungkusan boleh memadam fungsi yang tidak digunakan - dipanggil Tree -Shaking .
• Anda boleh membungkus versi yang berbeza dari kod yang sama dan membuat sasaran untuk pelayar yang lebih tua, node.js, deno, dll.
• beban fail tunggal lebih cepat daripada pelbagai fail, dan penyemak imbas tidak memerlukan sokongan modul ES.
• Pembungkusan peringkat pengeluaran dapat meningkatkan prestasi dengan memampatkan kod dan memadam log dan penyataan debug.

Mengapa menggunakan Esbuild?

Tidak seperti alat pembungkusan JavaScript, Esbuild adalah fail yang boleh dikumpulkan GO yang melaksanakan banyak pemprosesan selari. Ia pantas, seratus kali lebih cepat daripada rollup, bungkusan atau webpack. Ia menjimatkan beberapa minggu masa pembangunan semasa kitaran hayat projek.

Di samping itu, Esbuild juga menyediakan:

• terbina dalam JavaScript, TypeScript, JSX dan CSS pembungkusan dan keupayaan kompilasi.
• baris perintah, JavaScript, dan pergi konfigurasi API.
• Menyokong modul ES dan Commonjs.
• Pelayan pembangunan tempatan dengan mod pemantauan dan tambah nilai masa nyata.
• plugin untuk menambah lebih banyak ciri.
• Dokumentasi lengkap dan alat eksperimen dalam talian.

Kenapa elakkan menggunakan esbuild?

Pada masa penulisan, Esbuild telah mencapai versi 0.18. Ia boleh dipercayai, tetapi ia masih merupakan produk beta.

Esbuild dikemas kini dengan kerap, dan pilihan mungkin berubah antara versi yang berbeza. Dokumentasi mengesyorkan bahawa anda berpegang pada versi tertentu. Anda boleh mengemas kini, tetapi anda mungkin perlu memindahkan fail konfigurasi dan menggali dokumentasi baru untuk menemui perubahan besar.

Juga ambil perhatian bahawa Esbuild tidak melakukan pemeriksaan jenis jenis, jadi anda masih perlu menjalankan tsc -noEmit.

permulaan cepat super:

Jika perlu, buat projek node.js baru menggunakan npm init dan pasang esbuild secara tempatan sebagai kebergantungan pembangunan:

<code class="language-bash">npm install esbuild --save-dev --save-exact</code>

Pemasangan mengambil kira -kira 9MB. Semak sama ada ia berfungsi dengan menjalankan arahan berikut untuk melihat versi yang dipasang:

<code class="language-bash">./node_modules/.bin/esbuild --version</code>

atau jalankan arahan berikut untuk melihat bantuan CLI:

<code class="language-bash">./node_modules/.bin/esbuild --help</code>

Gunakan API CLI untuk membungkus skrip kemasukan (myApp.js) dan semua modul yang diimport ke dalam satu fail bernama bundle.js. Esbuild akan mengeluarkan fail menggunakan format fungsi lalai, berorientasikan penyemak imbas, Ekspresi Fungsi Segera (Iife):

<code class="language-bash">./node_modules/.bin/esbuild myapp.js --bundle --outfile=bundle.js</code>

Jika anda tidak menggunakan node.js, anda boleh memasang esbuild dengan cara lain.

Projek Sampel:

Muat turun fail sampel dan konfigurasi esbuild dari GitHub. Ini adalah projek Node.js, jadi pasang kebergantungan esbuild tunggal menggunakan arahan berikut:

<code class="language-bash">npm install</code>

Bina fail sumber di SRC ke dalam direktori Build dan mulakan pelayan pembangunan dengan arahan berikut:

<code class="language-bash">npm start</code>

Sekarang, navigasi ke localhost: 8000 dalam penyemak imbas anda untuk melihat laman web yang memaparkan jam langsung. Apabila anda mengemas kini sebarang fail CSS dalam SRC/CSS/atau SRC/CSS/PARTIAL, ESBuild mengemas semula kod dan memuatkan semula gaya dalam masa nyata.

tekan

ctrl | cmd c > Hentikan pelayan.

Buat versi pengeluaran untuk penempatan menggunakan arahan berikut:

<code class="language-bash">npm install esbuild --save-dev --save-exact</code>

Semak fail CSS dan JavaScript dalam direktori Build untuk melihat versi termampat tanpa peta sumber.

(kandungan sedemikian, kerana batasan ruang, sila rujuk teks asal atau meringkaskannya sendiri berdasarkan teks asal. Berikut adalah ringkasan topik bahagian berikutnya teks asal. Anda boleh mengekstrak kunci Maklumat dari teks asal berdasarkan topik ini dan buat pseudo-asal):

Gambaran Keseluruhan Projek

(Gambaran Keseluruhan Projek): Struktur Projek dan
• Penjelasan skrip. package.json Mengkonfigurasi esbuild
(mengkonfigurasi esbuild):
• Penjelasan terperinci mengenai fail, termasuk sasaran pembungkusan, pembungkusan JavaScript, pembungkusan CSS, dll. esbuild.config.js JavaScript Input and Output Files
(JavaScript Input and Output Files): Analisis kod sampel, termasuk
• , , , dan lain -lain. main.js dom.js time.js Pembungkusan CSS
(CSS Bundling): Konfigurasi Pembungkusan CSS dan Analisis Kod Sampel, termasuk
• , , , dan lain -lain. main.css variables.css elements.css Pemantauan, Membina semula dan Perkhidmatan
(menonton, membina semula, dan berkhidmat): Pelayan Pembangunan dan Pelaksanaan Hot Reload.
• Ringkasan
(Ringkasan): Ringkasan kelebihan dan kekurangan esbuild.
• FAQS
(Soalan Lazim (Soalan Lazim) Mengenai Esbuild): Soalan Lazim mengenai Esbuild.
• ingat, dalam proses pseudo-asal, perlu menyesuaikan struktur ayat, menggantikan sinonim, dan lain-lain, supaya artikel itu memberikan ungkapan yang berbeza tanpa mengubah makna asal. Sila pastikan anda membaca teks asal dengan teliti dan ekstrak maklumat utama berdasarkan ringkasan topik di atas untuk menulis semula.

Atas ialah kandungan terperinci Pengenalan kepada Bundler Esbuild. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!