Memulai Dengan Vite: Alat Bangun Utama

Saat aplikasi web menjadi lebih kaya fitur, kebutuhan akan alat build yang cepat dan efisien terus meningkat permintaannya.

Vite adalah alat build modern yang menyediakan server pengembangan secepat kilat dan proses build yang dioptimalkan, memungkinkan pengguna merampingkan alur kerja mereka dan meningkatkan pengalaman pengguna akhir.

Anda akan menjelajahi cara memulai dengan Vite, yang mencakup proses pemasangannya, fitur-fitur penting, dan perintah Antarmuka Baris Perintah (CLI).

Inisialisasi Proyek Vite

Sebelum Anda dapat menggunakan Vite, Anda harus menginstal Node.js dan Node Package Manager di sistem Anda. Setelah menginstal kedua paket ini, Anda dapat melanjutkan membuat proyek dengan Vite.

Berikut adalah cara menginisialisasi proyek dengan Vite menggunakan npm:

npm init vite

Ketika Anda menjalankan perintah ini, itu membuat proyek Vite baru di direktori kerja Anda saat ini. Perintah meminta Anda untuk membuat pilihan konfigurasi mendasar untuk menyiapkan proyek Vite baru Anda.

Berikut ini rincian opsi yang diminta oleh perintah untuk Anda pilih:

1. Nama Proyek. Ketika Anda menjalankan perintah, itu meminta Anda untuk memberikan nama untuk proyek baru Anda. Nama yang Anda berikan juga akan muncul di package.json file dan berfungsi sebagai nama direktori proyek Anda.
2. Pilih Kerangka. Prompt ini akan meminta Anda untuk memilih kerangka kerja untuk proyek Anda. Vite saat ini mendukung framework front-end populer seperti React, Vue, Angular, dan opsi Vanilla untuk kode JavaScript biasa.
3. Pilih Varian. Ini meminta Anda untuk memilih varian untuk proyek Anda, yang mencakup alternatif seperti JavaScript dan TypeScript bahasa subsetnya.

Setelah Anda memberikan informasi yang diperlukan, Vite akan membuat struktur proyek baru di direktori kerja Anda saat ini. Struktur akan mewakili pengaturan proyek dasar, termasuk a package.json berkas, sebuah src direktori dengan index.html Dan main.js berkas, dan a publik direktori.

Setelah membuat struktur proyek, Anda dapat menavigasi ke direktori proyek dengan menjalankan CD . Setelah Anda melakukannya, instal dependensi tambahan apa pun yang mungkin diperlukan oleh proyek Anda menggunakan instal npm memerintah.

Untuk memulai server pengembangan dan memantau setiap perubahan yang dilakukan pada proyek Anda, Anda akan menjalankan npm menjalankan dev perintah dalam terminal proyek Anda.

Fitur Vit

Fitur-fitur Vite berfokus pada penyederhanaan proses pembuatan dan peningkatan pengalaman pembuatan web.

Server Pengembangan Cepat

Server pengembangan Vite menggunakan modul ES asli dan pemuatan modul lambat, memungkinkan kecepatan luar biasa. Hal ini memungkinkan loop umpan balik yang cepat dan waktu startup secepat kilat.

Proses Pembuatan yang Dioptimalkan

Vite menyempurnakan prosedur pembuatannya untuk menghasilkan kode yang siap produksi, dioptimalkan, dan diperkecil. Selain itu, ini membuat file manifes yang dapat meng-cache bust dan aset versi.

Dukungan untuk Berbagai Kerangka Kerja Front-End

Vite mendukung berbagai kerangka front-end, termasuk Vue, dan kerangka kerja serupa seperti React Js dan Angular Js. Hal ini memungkinkan pengembang untuk memilih kerangka pilihan mereka dan memanfaatkan kemampuan kuat Vite.

Penggantian Modul Panas (HMR)

Fitur Hot Module Replacement (HMR) Vite memungkinkan pembaruan cepat dan lancar ke aplikasi tanpa memerlukan penyegaran halaman penuh. Ini membuat proses pengembangan lebih cepat dan lebih efisien.

Preprocessing CSS dan Integrasi PostCSS

Vite mendukung preprocessing CSS, termasuk Sass, Less, dan Stylus. Itu juga terintegrasi dengan PostCSS, memungkinkan untuk transformasi dan pengoptimalan tambahan ke CSS.

Vite hadir dengan banyak fitur lainnya, termasuk dukungan untuk TypeScript, JSX, dan WebAssembly. Dengan dirilisnya Vite v4.0.4, komunitas pengembang Vite telah berkembang dan secara aktif memelihara perangkat lunak, menambahkan fitur-fitur baru secara reguler.

Antarmuka Baris Perintah Vite (CLI)

Antarmuka Baris Perintah (CLI) Vite adalah alat praktis untuk menyesuaikan perilaku Vite. Ini menyediakan berbagai perintah penting yang juga membantu merampingkan proses pengembangan. Berikut adalah beberapa perintah CLI yang penting:

vite build

Perintah ini akan membangun aplikasi untuk lingkungan produksi, mengoptimalkan dan memperkecil kode sehingga siap diterapkan. Dengan menggunakan perintah ini, Anda dapat memastikan bahwa aplikasi Anda secepat dan seefektif mungkin dan siap untuk didistribusikan ke pengguna Anda.

lihat pratinjau

Perintah ini memungkinkan Anda melihat pratinjau kode yang dihasilkan sebelum menerapkannya ke produksi. Jika Anda ingin memastikan bahwa semuanya terlihat dan berfungsi seperti yang diharapkan dan tidak ada masalah atau masalah nyata yang memerlukan perhatian, ini adalah perintah yang berguna untuk dijalankan.

vite mengoptimalkan

vite mengoptimalkan tersedia di Vite 2.6 dan versi yang lebih baru yang menganalisis kode proyek dan menghasilkan build produksi yang dioptimalkan dengan melakukan tree gemetar, operasi pemecahan kode, dan menyematkan aset kecil langsung ke build akhir untuk mengurangi permintaan yang diperlukan untuk memuat aplikasi.

vite mengoptimalkan secara otomatis mengeksekusi selama vite build perintah, yang menghasilkan build produksi yang dioptimalkan. Anda juga dapat menjalankannya secara terpisah untuk memeriksa ukuran dan kinerja build

File Konfigurasi Vite

Di Vite, file konfigurasi menentukan berbagai opsi untuk proses pembuatan. File konfigurasi Vite menggunakan JavaScript dan sintaks modul ES6.

Secara default, Anda harus menamai file konfigurasi Anda vite.config.js dan letakkan di direktori root proyek.

Berikut adalah beberapa opsi yang paling umum digunakan dalam file konfigurasi Vite:

• akar. Menentukan direktori root proyek.
• server. Mengonfigurasi server pengembangan. Ini mencakup opsi untuk mengonfigurasi host, port, dan permintaan proksi ke backend API.
• plugin. Mengizinkan penambahan plugin ke proses pembuatan Vite. Plugin adalah fungsi yang memodifikasi proses build dengan cara tertentu, seperti menambahkan dukungan untuk format file baru atau mengubah kode sumber.
• menyelesaikan. Ini mengonfigurasi cara Vite menyelesaikan impor dalam proyek. Ini mencakup opsi untuk menentukan alias, ekstensi, dan direktori modul.

Berikut adalah contoh file konfigurasi Vite:

impor { definisikan Konfigurasi } dari'mengundang';
impor jalur dari'jalur';
eksporbawaan defineConfig({
 pelayan: {
 pelabuhan: 3000,
 membuka: BENAR,
 },
 menyelesaikan: {
 alias: {
'@': path.resolve (__dirname, './src'),
 },
 },
 plugin: [],
});

File konfigurasi ini menyiapkan proyek Vite dasar dengan:

• server pengembangan lokal yang berjalan di port 3000
• alias untuk src direktori
• tidak ada plugin

Vite Memiliki Komunitas yang Kuat

Beberapa sumber online menjelaskan dengan sangat rinci cara menggunakan Vite dengan framework populer seperti React, Vue, dan Angular.

Selain itu, ada banyak informasi tentang cara menggunakan Vite secara efektif dalam dokumentasi resminya. Dengan sumber daya yang tersedia ini, Anda dapat mengintegrasikan Vite ke dalam proyek Anda berikutnya.