Mi az a Vite? Érthető útmutató app-készítőknek

A Vite (ejtsd: „vít”, a francia „gyors” szó) egy build-eszköz weboldalakhoz és webappokhoz. Építés közben fejlesztői szervert futtat, amely szinte azonnal mutatja a változásokat a böngészőben. Indításkor a kódot kis, optimalizált fájlokba csomagolja, amelyeket bármilyen webhosting ki tud szolgálni. Ingyenes, nyílt forráskódú, és sok React-, Vue- és Svelte-projekt alapértelmezett eszköze.

Miért fontos a Vite, ha AI-val építesz

Lehet, hogy soha nem írsz be Vite-parancsot, de ha az appodat AI-appépítővel készítetted, nagy valószínűséggel a Vite futtatja. A Mythex új projektjeit Vite + React + TypeScript + Tailwind alapokra indítja, hacsak mást nem kérsz (a technológiák kiválasztásának módja).

Az, hogy tudod, mit csinál a Vite, segít neked:

• Értsd az Előnézetet. Az élő előnézet, amely frissül, amíg az AI fájlokat szerkeszt, jellemzően egy Vite-fejlesztői szerver.
• Értsd a telepítést. Egy Vite-app statikus fájlok mappájává válik — HTML, JavaScript, CSS és képek —, amelyet olcsó és egyszerű hostolni.
• Olvasd a hibaüzeneteket. Ha az előnézet piros hibaablakot vagy üres oldalt mutat, gyakran a Vite jelenti, hogy egy fájl nem fordult le.
• Ismerd a határait. A Vite a frontendet építi. Ha az appodnak backendre van szüksége — adatbázis, titkos API-kulcsok, fizetések —, az máshol fut. Lásd: frontend vs. backend.

Mindennapi hasonlat

Gondolj egy étterem konyhájára.

• Az előkészítés idején (fejlesztés) a szakács minden ételt megkóstol és a főzés közben igazít. Változtatja a fűszerezést, és egy másodperc múlva újra megkóstolja. Ez a Vite fejlesztői szervere: megváltoztatsz egy fájlt, az oldal azonnal frissül, gyakran anélkül, hogy elveszítenéd, amit egy űrlapba beírtál.
• Egy catering-rendelésnél (éles környezet) minden meg van főzve, adagolva, csomagolva és címkézve, hogy jól utazzon, és bárhol felszolgálható legyen. Ez a vite build: a kódod összecsomagolódik, összezsugorodik és ellenőrző azonosítót kap fájlnevekben, így bármilyen hostra készen áll.

Ugyanazok a receptek, két nagyon különböző kezelési mód — és a Vite mindkettőt elvégzi.

Mit csinál tulajdonképpen a Vite

Egy modern webapp sok fájlból áll: komponensekből, stílusokból, képekből és harmadik féltől származó könyvtárakból. A böngészők ezeket nem tudják úgy használni, ahogy vannak. A TypeScriptet JavaScriptté kell alakítani, a React JSX-ét át kell írni, a Tailwind osztályokat pedig CSS-sé kell alakítani.

A Vite ezt két módban kezeli:

A régebbi eszközök az egész appot összecsomagolták, mielőtt bármit megmutattak volna, így egy nagy projekt indítása és frissítése sokáig tartott. A Vite trükkje, hogy fejlesztés közben ezt kihagyja, és a böngésző szükség szerint tölti be a fájlokat. Éles környezetben továbbra is csomagol — a Vite 8-tól a Rolldown nevű csomagolóval —, mert sok apró fájl lassabb a látogatóknak, mint néhány optimalizált.

Példa: mi van egy Vite-projektben

Nagyjából így néz ki egy kis Vite + React app:

my-app/
  index.html          ← az egyetlen HTML-oldal, ahonnan az app indul
  package.json        ← könyvtárak és scriptek listája (dev, build)
  vite.config.ts      ← Vite-beállítások és pluginek
  src/
    main.tsx          ← elindítja a Reactot, és beilleszti az index.html-be
    App.tsx           ← az app legfelső szintű komponense
    index.css         ← stílusok, pl. @import "tailwindcss";
  public/             ← változatlanul átmásolt fájlok (favicon, robots.txt)

És a scriptek a package.json-ban:

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

Kövessünk egyetlen változtatást:

1. Megkéred az AI-t: „tedd kékre a címsort”.
2. Az AI egy osztályt módosít az App.tsx-ben.
3. A Vite észreveszi, hogy a fájl változott, csak azt a fájlt alakítja át, és a frissítést eljuttatja a böngészőhöz.
4. A címsor kékre vált az előnézetben, általában egy másodpercen belül.

Közzétételkor a vite build olyasmit állít elő, mint a dist/index.html és a dist/assets/index-a1b2c3.js. A fájlnév véletlenszerűnek tűnő része minden tartalomváltozáskor megváltozik, így a böngészők és a CDN-ek hosszú ideig gyorsítótárazhatják a fájlokat anélkül, hogy elavult kódot szolgálnának ki.

Környezeti változók a Vite-ban

A Vite csak azokat a változókat teszi elérhetővé a böngészőben futó kódnak, amelyek neve VITE_-tal kezdődik, például VITE_PUBLIC_MAP_ID. Ez biztonsági intézkedés: a böngészőkódban minden látható a látogatók számára, ezért a titkos kulcsoknak soha nincs ilyen előtagjuk, és backendben kell maradniuk. Lásd: környezeti változók és titkok.

Fontos fogalmak

Gyakori tévhitek

• „A Vite keretrendszer.” Build-eszköz. A React, a Vue vagy a Svelte a keretrendszer; a Vite futtatja és csomagolja.
• „A Vite-app tartalmaz backendet.” Egy szokásos Vite-app csak frontend. Az adatbázisokhoz, bejelentkezésekhez és titkos kulcsokhoz szerver vagy API kell mellé.
• „A fejlesztői szerver online is jó.” Nem valódi forgalomra készült. Mindig az éles build kimenetét telepítsd.
• „A .env-ben minden titkos.” Egy Vite-appban a VITE_ változók bekerülnek a fájlokba, amelyeket minden látogató letölt.
• „Ha egy oldal frissítésekor 404-es hiba jelenik meg, az app elromlott.” Egy egyoldalas appnál a hostnak minden útvonalat vissza kell küldenie az index.html-re. Ez egy hosting-beállítás — lásd: 404-es hibák javítása telepítés után.

Mit kérj az AI-építődtől

• „Ez az app csak Vite (frontend), vagy van backendje is? Hol fut az egyes részek?”
• „Futtasd az éles buildet, és javíts ki minden hibát vagy figyelmeztetést, mielőtt publikálom.”
• „Ellenőrizd, hogy egyetlen titkos kulcs sincs VITE_ változóban vagy bárhol a frontend kódban.”
• „Az előnézet üres oldalt mutat — nézd meg a Vite- és a böngészőkonzol hibáit, és javítsd ki az okát.” Lásd: hogyan javítsd az üres fehér oldalt.
• „Győződj meg róla, hogy közzététel után bármely oldal URL-jének frissítése működik, nem csak a főoldalé.”

A Vite a Mythexben

Minden új Mythex-projekt Vite-on indul, hacsak nem kéred Next.js-t, statikus HTML-t vagy más backendet. A privát homokozódban az élő Előnézet frissül, amíg az ügynök fájlokat szerkeszt, a Publikálás pedig felépíti az appot és telepíti — nem kell neked hostingot beállítani. Ha később API-ra vagy adatbázisra van szükséged, kérd a chatben, és a Mythex hátteret szolgáltatást adhat a Vite-frontend mellé (többszolgáltatásos appok).

Kérdések