Apa Itu Vite? Panduan Bahasa Mudah untuk Pembina App

Vite (disebut "veet", bermaksud "pantas" dalam bahasa Perancis) ialah alat binaan untuk laman web dan app web. Semasa anda membina, ia menjalankan pelayan pembangunan yang menunjukkan perubahan anda dalam pelayar hampir serta-merta. Apabila anda bersedia untuk melancarkan, ia mengemas kod anda menjadi fail kecil yang dioptimumkan yang boleh dihidangkan oleh mana-mana hos web. Ia percuma, sumber terbuka dan alat lalai di sebalik banyak projek React, Vue dan Svelte.

Mengapa Vite penting apabila anda membina dengan AI

Anda mungkin tidak pernah menaip arahan Vite, tetapi jika app anda dibina dengan pembina app AI, Vite berkemungkinan besar sedang menjalankannya. Mythex memulakan projek baharu dengan Vite + React + TypeScript + Tailwind melainkan anda meminta sesuatu yang lain (cara teknologi dipilih).

Mengetahui apa yang Vite lakukan membantu anda:

• Memahami Pratonton. Pratonton langsung yang dikemas kini apabila AI menyunting fail biasanya ialah pelayan pembangunan Vite.
• Memahami penempatan. App Vite menjadi folder fail statik — HTML, JavaScript, CSS dan imej — yang murah dan mudah untuk dihoskan.
• Membaca mesej ralat. Apabila pratonton menunjukkan overlay ralat merah atau halaman kosong, selalunya Vite melaporkan bahawa satu fail gagal dikompil.
• Mengetahui hadnya. Vite membina bahagian hadapan. Jika app anda memerlukan bahagian belakang — pangkalan data, kunci API rahsia, pembayaran — ia berjalan di tempat lain. Lihat bahagian hadapan berbanding bahagian belakang.

Analogi harian

Bayangkan dapur restoran.

• Semasa persediaan servis (pembangunan), tukang masak merasa dan melaraskan setiap hidangan semasa memasak. Tukar perasa, rasa semula sesaat kemudian. Itulah pelayan pembangunan Vite: anda menukar fail, halaman dikemas kini serta-merta, selalunya tanpa kehilangan apa yang telah anda taip dalam borang.
• Untuk pesanan katering (pengeluaran), semuanya dimasak, dibahagikan, dibungkus dan dilabel supaya ia selamat dibawa dan boleh dihidangkan di mana-mana. Itulah vite build: kod anda dibundel, dikecilkan dan diberi cap jari menjadi fail yang sedia untuk mana-mana hos.

Resipi yang sama, dua cara yang sangat berbeza untuk mengendalikannya — dan Vite melakukan kedua-duanya.

Apa sebenarnya Vite lakukan

App web moden terdiri daripada banyak fail: komponen, gaya, imej dan pustaka pihak ketiga. Pelayar tidak dapat menggunakan semua itu seperti yang ditulis. TypeScript perlu menjadi JavaScript, JSX React perlu diubah, dan kelas Tailwind perlu ditukar kepada CSS.

Vite mengendalikan ini dalam dua mod:

Alat lama membundel keseluruhan app sebelum menunjukkan apa-apa, jadi memulakan dan mengemas kini projek besar boleh mengambil masa yang lama. Helah Vite ialah melangkau itu semasa pembangunan dan membenarkan pelayar memuatkan fail mengikut keperluan. Untuk pengeluaran, ia tetap membundel — sejak Vite 8, dengan pembundel bernama Rolldown — kerana banyak fail kecil lebih perlahan untuk pelawat berbanding beberapa fail yang dioptimumkan.

Contoh kerja: apa yang ada dalam projek Vite

Inilah lebih kurang rupa app Vite + React yang kecil:

my-app/
  index.html          ← halaman HTML tunggal tempat app bermula
  package.json        ← senarai pustaka dan skrip (dev, build)
  vite.config.ts      ← tetapan dan plugin Vite
  src/
    main.tsx          ← memulakan React dan memasangnya ke dalam index.html
    App.tsx           ← komponen peringkat atas app anda
    index.css         ← gaya, cth. @import "tailwindcss";
  public/             ← fail yang disalin seperti sedia ada (favicon, robots.txt)

Dan skrip dalam package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Sekarang ikuti satu perubahan:

1. Anda meminta AI untuk "jadikan tajuk biru".
2. Ia menyunting kelas dalam App.tsx.
3. Vite perasan fail itu berubah, menukar hanya fail itu dan menghantar kemas kini kepada pelayar.
4. Tajuk bertukar biru dalam pratonton, biasanya dalam masa satu saat.

Apabila anda menerbitkan, vite build menghasilkan sesuatu seperti dist/index.html serta dist/assets/index-a1b2c3.js. Bahagian nama fail yang kelihatan rawak itu berubah apabila kandungan berubah, jadi pelayar dan CDN boleh menyimpan fail dalam cache untuk tempoh yang lama tanpa menghidangkan kod lama.

Pembolehubah persekitaran dalam Vite

Vite hanya mendedahkan pembolehubah yang namanya bermula dengan VITE_ kepada kod pelayar, contohnya VITE_PUBLIC_MAP_ID. Itu langkah keselamatan: apa-apa dalam kod pelayar boleh dilihat oleh pelawat, jadi kunci rahsia tidak boleh mempunyai awalan itu dan mesti kekal di bahagian belakang. Lihat pembolehubah persekitaran dan rahsia.

Istilah utama

Salah faham yang biasa

• "Vite ialah rangka kerja." Ia alat binaan. React, Vue atau Svelte ialah rangka kerja; Vite menjalankan dan mengemasnya.
• "App Vite termasuk bahagian belakang." App Vite standard hanya bahagian hadapan. Pangkalan data, log masuk dan kunci rahsia memerlukan pelayan atau API di sebelahnya.
• "Pelayan pembangunan boleh diletakkan dalam talian." Ia tidak direka untuk trafik sebenar. Sentiasa lancarkan output binaan pengeluaran.
• "Apa-apa dalam .env ialah rahsia." Dalam app Vite, pembolehubah VITE_ dibakar ke dalam fail yang dimuat turun oleh setiap pelawat.
• "Muat semula halaman yang memberi 404 bermakna app rosak." Dalam app satu halaman, hos mesti menghantar setiap laluan kembali ke index.html. Ia tetapan hos — lihat cara membetulkan ralat 404 selepas penempatan.

Apa yang perlu diminta daripada pembina AI anda

• "Adakah app ini hanya Vite (bahagian hadapan), atau ada bahagian belakang juga? Di mana setiap bahagian berjalan?"
• "Jalankan binaan pengeluaran dan betulkan sebarang ralat atau amaran sebelum saya terbitkan."
• "Semak bahawa tiada kunci rahsia dalam pembolehubah VITE_ atau di mana-mana dalam kod bahagian hadapan."
• "Pratonton menunjukkan halaman kosong — semak ralat konsol Vite dan pelayar, dan betulkan punca." Lihat cara membetulkan halaman putih kosong.
• "Pastikan memuat semula mana-mana URL halaman berfungsi selepas penerbitan, bukan hanya halaman utama."

Vite dalam Mythex

Setiap projek Mythex baharu bermula pada Vite melainkan anda meminta Next.js, HTML statik atau bahagian belakang yang berbeza. Pratonton langsung dalam sandbox peribadi anda dikemas kini apabila ejen menyunting fail, dan Terbitkan membina app dan menerapkannya — tiada hosting yang perlu anda sediakan sendiri. Jika kemudian anda memerlukan API atau pangkalan data, minta dalam sembang dan Mythex boleh menambah perkhidmatan bahagian belakang di sebelah bahagian hadapan Vite (app berbilang perkhidmatan).

Soalan lazim