index.md

Memulai

Gambaran

Vite (kata bahasa Prancis yang berarti "cepat", dieja /vit/, seperti "veet") adalah sebuah alat pembangunan yang bertujuan untuk menyediakan pengalaman pengembangan yang lebih cepat dan ringan untuk proyek web modern. Ini terdiri dari dua bagian utama:

• Sebuah server pengembangan yang menyediakan pengaya fitur lengkap di atas modul ES asli, misalnya penggantian modul panas (Hot Module Replacement/HMR) yang sangat cepat HMR (Hot Module Replacement).

• Sebuah perintah pembangunan yang mengikat kode Anda dengan Rollup, yang telah dikonfigurasi sebelumnya untuk menghasilkan aset statis yang sangat dioptimalkan untuk produksi.

Vite memiliki opini dan datang dengan default yang masuk akal dari kotak. Baca tentang apa yang mungkin dalam Panduan Fitur. Dukungan untuk kerangka kerja atau integrasi dengan alat lain memungkinkan melalui Plugin. Bagian Seksi Konfigurasi menjelaskan cara menyesuaikan Vite dengan proyek Anda jika diperlukan.

Vite juga sangat dapat diperluas melalui API Plugin dan API JavaScript dengan dukungan pengetikan penuh.

Anda dapat mempelajari lebih lanjut tentang alasan di balik proyek ini di bagian Mengapa Vite.

Dukungan Browser

Selama pengembangan, Vite mengatur esnext sebagai target transformasi, karena kami mengasumsikan bahwa browser modern digunakan dan mendukung semua fitur JavaScript dan CSS terbaru. Hal ini mencegah penurunan sintaks, membiarkan Vite melayani modul sesuai mungkin dengan kode sumber asli.

Untuk pembangunan produksi, secara default Vite menargetkan browser yang mendukung Modul ES Asli, impor dinamis ESM asli, dan import.meta. Browser warisan dapat didukung melalui plugin resmi @vitejs/plugin-legacy. Lihat bagian Membangun untuk Produksi untuk lebih banyak detail.

Mencoba Vite secara Online

Anda dapat mencoba Vite secara online di StackBlitz. Ini menjalankan pengaturan pembangunan berbasis Vite langsung di browser, sehingga hampir identik dengan pengaturan lokal tetapi tidak memerlukan instalasi apa pun di mesin Anda. Anda dapat navigasi ke vite.new/{template} untuk memilih kerangka kerja apa yang ingin digunakan.

Preset template yang didukung adalah:

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts
solid	solid-ts
qwik	qwik-ts

Memulai Proyek Vite Pertama Anda

::: tip Catatan Kompatibilitas Vite memerlukan versi Node.js 18+. 20+. Namun, beberapa template memerlukan versi Node.js yang lebih tinggi untuk dapat berfungsi, harap tingkatkan versinya jika manajer paket Anda memberikan peringatan tentang hal tersebut. :::

::: code-group

$ npm create vite@latest

$ yarn create vite

$ pnpm create vite

$ bun create vite

:::

Kemudian ikuti petunjuknya!

Anda juga dapat langsung menentukan nama proyek dan template yang ingin Anda gunakan melalui opsi baris perintah tambahan. Misalnya, untuk memulai proyek Vite + Vue, jalankan:

# npm 7+, tambahan double-dash diperlukan:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

# bun
bun create vite my-vue-app --template vue

Lihat create-vite untuk lebih banyak detail tentang setiap template yang didukung: vanilla, vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-swc-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts, solid, solid-ts, qwik, qwik-ts.

Template Komunitas

create-vite adalah alat untuk dengan cepat memulai proyek dari template dasar untuk kerangka kerja populer. Periksa Awesome Vite untuk template yang dipelihara komunitas yang mencakup alat lain atau menargetkan kerangka kerja yang berbeda.

Untuk template di https://github.com/user/project, Anda dapat mencobanya secara online menggunakan https://github.stackblitz.com/user/project (menambahkan .stackblitz setelah github pada URL proyek).

Anda juga dapat menggunakan alat seperti degit untuk memulai proyek Anda dengan salah satu template. Mengasumsikan proyek berada di GitHub dan menggunakan main sebagai cabang default, Anda dapat membuat salinan lokal menggunakan:

npx degit user/project#main my-project
cd my-project

npm install
npm run dev

index.html dan Root Proyek

Salah satu hal yang mungkin Anda perhatikan adalah dalam proyek Vite, index.html berada di pusat perhatian bukan tersembunyi di dalam public. Ini sengaja dilakukan: selama pengembangan Vite adalah server, dan index.html adalah titik masuk ke aplikasi Anda.

Vite memperlakukan index.html sebagai kode sumber dan bagian dari grafik modul. Ini menyelesaikan <script type="module" src="..."> yang merujuk ke kode sumber JavaScript Anda. Bahkan inline <script type="module"> dan CSS yang dirujuk melalui <link href> juga menikmati fitur khusus Vite. Selain itu, URL di dalam index.html secara otomatis disesuaikan sehingga tidak perlu menggunakan placeholder khusus %PUBLIC_URL%.

Mirip dengan server http statis, Vite memiliki konsep "direktori root" dari mana file Anda disajikan. Anda akan melihatnya dirujuk sebagai <root> di seluruh dokumen lainnya. URL absolut dalam kode sumber Anda akan diselesaikan menggunakan root proyek sebagai dasar, sehingga Anda dapat menulis kode seolah-olah Anda sedang bekerja dengan server file statis normal (kecuali lebih kuat!). Vite juga mampu menangani dependensi yang menyelesaikan lokasi sistem file di luar root, yang membuatnya dapat digunakan bahkan dalam setup berbasis monorepo.

Vite juga mendukung aplikasi multi-halaman dengan beberapa titik masuk .html.

Menentukan Root Alternatif

Menjalankan vite memulai server pengembangan menggunakan direktori kerja saat ini sebagai root. Anda dapat menentukan root alternatif dengan vite serve some/sub/dir. Perhatikan bahwa Vite juga akan menyelesaikan file konfigurasi (yaitu vite.config.js) di dalam root proyek, jadi Anda perlu memindahkannya jika root berubah.

Antarmuka Baris Perintah

Dalam proyek di mana Vite diinstal, Anda dapat menggunakan biner vite dalam skrip npm Anda, atau menjalankannya langsung dengan npx vite. Berikut ini adalah skrip npm default dalam proyek Vite yang dibuat:

{
  "scripts": {
    "dev": "vite", // memulai server pengembangan, alias: `vite dev`, `vite serve`
    "build": "vite build", // membangun untuk produksi
    "preview": "vite preview" // pratinjau lokal pembangunan produksi
  }
}

Anda dapat menentukan opsi CLI tambahan seperti --port atau --open. Untuk daftar lengkap opsi CLI, jalankan npx vite --help di proyek Anda.

Pelajari lebih lanjut tentang Antarmuka Baris Perintah

Menggunakan Komit yang Belum Dirilis

Jika Anda tidak sabar untuk menguji fitur terbaru sebelum rilis baru, Anda perlu mengklon repo vite ke mesin lokal Anda dan kemudian membangun dan menghubungkannya sendiri (pnpm diperlukan):

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # gunakan manajer paket pilihan Anda untuk langkah ini

Kemudian pergi ke proyek berbasis Vite Anda dan jalankan pnpm link --global vite (atau manajer paket yang Anda gunakan untuk menghubungkan vite secara global). Sekarang mulai ulang server pengembangan untuk menggunakan fitur terbaru!

Komunitas

Jika Anda memiliki pertanyaan atau membutuhkan bantuan, jangkau komunitas di Discord dan Diskusi GitHub.