Vite: Panduan ringkas kepada alat binaan hadapan generasi seterusnya

Vite ialah alat binaan hadapan generasi seterusnya yang dibangunkan oleh Yuxi You, pengarang Vue.js. Ia telah menarik perhatian meluas untuk permulaan sejuk yang cepat, kompilasi atas permintaan dan keupayaan kemas kini panas. Vite menyediakan kelajuan permulaan persekitaran pembangunan yang hampir serta-merta dan pengalaman pembangunan yang sangat dioptimumkan dengan memanfaatkan fungsi import modul ES asli penyemak imbas.

Pasang Vite

Mula-mula, pastikan Node.js dipasang dalam sistem anda (versi LTS disyorkan). Kemudian, pasang Vite secara global melalui npm atau yarn:

npm install -g create-vite
# Or use yarn
yarn global add create-vite

Buat projek baharu

Gunakan arahan create-vite untuk mencipta projek Vite baharu. Berikut ialah contoh mencipta projek Vue:

create-vite my-vite-project --template vue
cd my-vite-project

Ini akan memulakan projek Vite berasaskan Vue 3.

Pembangunan dan berjalan

Dalam direktori akar projek, jalankan arahan berikut untuk memulakan pelayan pembangunan:

npm run dev
# Or use yarn
yarn dev

Vite akan segera memulakan pelayan pembangunan setempat, dan anda boleh melawati http://localhost:5173 dalam penyemak imbas untuk melihat aplikasi anda. Vite menyokong penggantian modul panas (HMR), yang bermaksud bahawa apabila anda mengedit kod, halaman penyemak imbas akan dikemas kini dalam masa nyata tanpa memuat semula.

Bina versi pengeluaran

Apabila anda bersedia untuk menggunakan aplikasi, jalankan arahan berikut untuk membina versi pengeluaran:

npm run build
# Or use yarn
yarn build

Ini akan menjana folder statik sedia pengeluaran yang dioptimumkan, biasanya terletak dalam direktori dist.

Konfigurasi Vite

npm install -g create-vite
# Or use yarn
yarn global add create-vite

Ciri teras Vite

• Permulaan Pantas: Vite memanfaatkan sokongan modul ES asli penyemak imbas untuk memulakan pelayan pembangunan dengan cepat tanpa penggabungan, meningkatkan kelajuan permulaan dengan ketara.
• Kompilkan atas permintaan: Dalam mod pembangunan, Vite hanya menyusun modul yang anda sedang lihat, dengan sangat mempercepatkan kitaran edit-refresh.
• Penggantian Modul Panas (HMR): Vite menyediakan pengalaman HMR yang sangat pantas, kemas kini masa nyata yang hampir lancar.
• Konfigurasi mudah: Fail konfigurasi Vite vite.config.js lebih ringkas daripada Webpack, menurunkan ambang kemasukan.
• Keserasian yang baik: Vite menyokong pelbagai rangka kerja, termasuk Vue, React, Preact, Svelte, dsb., dan boleh menyesuaikan diri dengan konfigurasi tersuai dengan mudah.
• Sistem pemalam: Vite menyediakan sistem pemalam yang berkuasa yang membolehkan pembangun memanjangkan fungsinya untuk memenuhi keperluan projek tertentu.

Penerokaan Lanjutan

• Fail konfigurasi: Walaupun konfigurasi lalai Vite sudah berkuasa, anda boleh membuat lebih banyak penyesuaian dalam vite.config.js, seperti mengkonfigurasi proksi, alias, prapemproses CSS, dll.
• Vue DevTools: Apabila membangunkan aplikasi Vue, pastikan anda memasang dan mendayakan sambungan penyemak imbas Vue DevTools untuk penyahpepijatan status aplikasi yang lebih baik.
• Sokongan TypeScript: Jika anda menggunakan TypeScript dalam projek anda, Vite sudah menyokongnya secara lalai. Anda hanya perlu memasukkan fail .ts atau .tsx dalam projek anda.
• Pengoptimuman: Ketahui cara menggunakan pilihan pengoptimuman terbina dalam Vite dan pemalam luaran untuk meningkatkan lagi prestasi aplikasi.

Atas ialah kandungan terperinci Vite: Panduan ringkas kepada alat binaan hadapan generasi seterusnya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!