Kaj je Vite? Vodnik v preprostem jeziku za graditelje aplikacij

Vite (izgovori se »vit«, po francosko »hitro«) je orodje za gradnjo spletnih strani in aplikacij. Med gradnjo poganja razvojni strežnik, ki vaše spremembe v brskalniku prikaže skoraj takoj. Ko ste pripravljeni na objavo, kodo zapakira v majhne, optimizirane datoteke, ki jih lahko postreže katerikoli spletni gostitelj. Je brezplačen, odprtokoden in privzeto orodje za številne projekte React, Vue in Svelte.

Zakaj je Vite pomemben, ko gradite z AI

Morda nikoli ne vpišete ukaza za Vite, a če je vaša aplikacija zgrajena z AI graditeljem, jo verjetno poganja Vite. Mythex nove projekte začne na Vite + React + TypeScript + Tailwind, razen če zahtevate kaj drugega (kako se izbere tehnologija).

Da veste, kaj Vite počne, vam pomaga pri naslednjem:

• Razumevanje predogleda. Živi predogled, ki se posodablja, ko AI ureja datoteke, je običajno razvojni strežnik Vite.
• Razumevanje objave. Aplikacija Vite postane mapa statičnih datotek – HTML, JavaScript, CSS in slike –, ki jo je poceni in preprosto gostiti.
• Branje sporočil o napakah. Ko predogled pokaže rdeč prekrivni sloj z napako ali prazno stran, je pogosto Vite, ki javi, da se datoteka ni prevedla.
• Poznavanje njegovih mej. Vite gradi frontend. Če vaša aplikacija potrebuje backend – bazo, skrivne API ključe, plačila –, ta teče nekje drugje. Glejte frontend proti backendu.

Vsakdanja primerjava

Pomislite na kuhinjo v restavraciji.

• Med pripravo (razvoj) kuhar poskusi in prilagaja vsako jed sproti. Spremenite začimbo, čez sekundo jo znova poskusite. To je razvojni strežnik Vita: spremenite datoteko, stran se takoj posodobi, pogosto celo brez izgube tega, kar ste vtipkali v obrazec.
• Za cateringu (produkcija) se vse skuha, porcionira, zapakira in označi, da lahko potuje in se postreže kjerkoli. To je vite build: vaša koda se združi, skrči in opremi s prstnimi odtisi v datotekah, pripravljenih za katerikoli gostitelj.

Isti recepti, dva zelo različna načina dela – Vite opravi oboje.

Kaj Vite dejansko počne

Sodobna spletna aplikacija je sestavljena iz mnogih datotek: komponent, slogov, slik in knjižnic tretjih oseb. Brskalniki tega ne morejo uporabiti, kakor je napisano. TypeScript mora postati JavaScript, JSX iz Reacta mora biti pretvorjen, razredi Tailwinda pa morajo postati CSS.

Vite to naredi v dveh načinih:

Starejša orodja so pred prikazom celotne aplikacije vso zgradila, zato je zagon in posodabljanje velikega projekta lahko trajalo dolgo. Trik Vita je, da to preskoči med razvojem in pusti brskalniku, da datoteke nalaga po potrebi. Za produkcijo še vedno združuje kodo – od Vite 8 z gradnikom Rolldown –, ker je veliko majhnih datotek za obiskovalce počasnejših kot nekaj optimiziranih.

Delovni primer: kaj je v projektu Vite

Tako nekako izgleda majhna aplikacija Vite + React:

moja-aplikacija/
  index.html          ← edina HTML stran, iz katere se aplikacija začne
  package.json        ← seznam knjižnic in skript (dev, build)
  vite.config.ts      ← nastavitve in vtičniki za Vite
  src/
    main.tsx          ← zažene React in ga vstavi v index.html
    App.tsx           ← glavna komponenta vaše aplikacije
    index.css         ← slogi, npr. @import "tailwindcss";
  public/             ← datoteke, ki se kopirajo tako, kot so (favicon, robots.txt)

In skripte v package.json:

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

Zdaj spremljajte eno spremembo:

1. Od AI zahtevate: »naredi naslov moder«.
2. Ta uredi razred v App.tsx.
3. Vite opazi, da se datoteka je spremenila, samo to datoteko pretvori in posodobitev pošlje v brskalnik.
4. Naslov se v predogledu obarva, običajno v manj kot sekundi.

Ko objavite, vite build ustvari nekaj takega kot dist/index.html in dist/assets/index-a1b2c3.js. Naključno videti del imena datoteke se spremeni, kadar se spremeni vsebina, zato lahko brskalniki in CDN-ji datoteke predpomnijo dolgo časa, ne da bi postregli zastarelo kodo.

Okoljske spremenljivke v Viteu

Vite v kodo brskalnika izpostavi samo spremenljivke, katerih imena se začnejo z VITE_, na primer VITE_PUBLIC_MAP_ID. To je varnostni ukrep: vse, kar je v kodi brskalnika, lahko vidijo obiskovalci, zato skrivni ključi ne smejo imeti te predpone in morajo ostati na backendu. Glejte okoljske spremenljivke in skrivnosti.

Ključni pojmi

Pogoste zmote

• »Vite je ogrodje.« Je orodje za gradnjo. React, Vue ali Svelte je ogrodje; Vite ga poganja in pakira.
• »Aplikacija Vite vključuje backend.« Standardna aplikacija Vite je samo frontend. Baze, prijave in skrivni ključi potrebujejo strežnik ali API ob njej.
• »Razvojni strežnik lahko dam na splet.« Ni namenjen pravemu prometu. Vedno objavite rezultat produkcijske gradnje.
• »Vse v .env je skrivno.« V aplikaciji Vite so spremenljivke VITE_ vgrajene v datoteke, ki jih prenese vsak obiskovalec.
• »Osvežitev strani z napako 404 pomeni, da je aplikacija pokvarjena.« V enostranski aplikaciji mora gostitelj vsako pot poslati nazaj na index.html. Gre za nastavitev gostitelja – glejte kako odpraviti napake 404 po objavi.

Kaj zahtevati od AI graditelja

• „Je ta aplikacija samo Vite (frontend) ali ima tudi backend? Kje teče vsak del?“
• „Zaženi produkcijsko gradnjo in popravi vse napake ali opozorila, preden objavim.“
• „Preveri, da v spremenljivkah VITE_ ali kjerkoli v frontend kodi ni skrivnih ključev.“
• „Predogled kaže prazno stran – preveri napake v konzoli Vita in brskalnika ter odpravi vzrok.“ Glejte kako odpraviti prazno belo stran.
• „Poskrbi, da po objavi osvežitev katerega koli naslova strani deluje, ne le domače strani.“

Vite v Mythexu

Vsak nov projekt Mythex začne na Viteu, razen če zahtevate Next.js, statični HTML ali drug backend. Živi predogled v vašem zasebnem peskovniku se posodablja, ko agent ureja datoteke, Objava pa aplikacijo zgradi in razmesti – ni vam treba sami nastavljati gostovanja. Če kasneje potrebujete API ali bazo, to zahtevajte v klepetu, Mythex pa lahko poleg frontenda Vite doda storitev backenda (aplikacije z več storitvami).

Vprašanja