Mis on Vite? Lihtne juhend rakenduste ehitajatele

Vite (hääldatakse „veet“, prantsuse keeles „kiire“) on veebisaitide ja veebirakenduste ehitustööriist. Ehitamise ajal käivitab see arendusserveri, mis näitab sinu muudatusi brauseris peaaegu kohe. Kui oled valmis käivitama, pakendab see koodi väikesteks optimeeritud failideks, mida iga veebimajutus saab serveerida. See on tasuta, avatud lähtekoodiga ja paljude React-, Vue- ja Svelte-projektide vaikimisi tööriist.

Miks Vite AI-ga ehitamisel oluline on

Võid kunagi ühtegi Vite käsku mitte kirjutada, kuid kui su rakendus on ehitatud AI rakenduste ehitajaga, töötab selle taga tõenäoliselt Vite. Mythex alustab uusi projekte Vite + React + TypeScript + Tailwind komplektiga, kui sa ei palu midagi muud (kuidas tehnoloogia valitakse).

Vite'i tundmine aitab sul:

• Mõista eelvaadet. Elav eelvaade, mis uueneb AI failide muutmisel, on tavaliselt Vite arendusserver.
• Mõista avaldamist. Vite rakendus muutub staatiliste failide kaustaks — HTML, JavaScript, CSS ja pildid — mis on odav ja lihtne majutada.
• Lugeda veateateid. Kui eelvaade näitab punast veaakent või tühja lehte, on see sageli Vite'i teade, et fail ei kompileeru.
• Tunda selle piire. Vite ehitab esiosa. Kui su rakendus vajab tagaosa — andmebaasi, salajasi API-võtmeid, makseid —, töötab see mujal. Vaata esiosa vs tagaosa.

Igapäevane võrdlus

Mõtle restorani köögile.

• Ettevalmistusel (arendus) maitseb kokk iga rooga ja kohandab seda käigus. Muuda maitsestamist, maitse uuesti sekund hiljem. See on Vite'i arendusserver: muudad faili ja lehekülg uueneb kohe, sageli ilma, et vormis kirjutatu kaoks.
• Kateringutellimuse (tootmise) jaoks küpsetatakse, portsjoneeritakse, pakendatakse ja märgistatakse kõik nii, et see talub transporti ja sobib serveerimiseks kõikjal. See on vite build: su kood kimbutatakse, kokku pakitakse, kahanetakse ja varustatakse failinimedega, mis on valmis mis tahes majutuseks.

Samad retseptid, kaks väga erinevat viisi nende käsitlemiseks — ja Vite teeb mõlemat.

Mida Vite tegelikult teeb

Kaasaegne veebirakendus koosneb paljudest failidest: komponentidest, stiilidest, piltidest ja kolmandate osapoolte teekidest. Brauserid ei suuda kõike seda sellisena kasutada. TypeScript tuleb muuta JavaScriptiks, Reacti JSX tuleb teisendada ja Tailwindi klassid tuleb muuta CSS-iks.

Vite käsitleb seda kahes režiimis:

Vanemad tööriistad pakendasid kogu rakenduse enne midagi näitamist, seega võis suure projekti käivitamine ja uuendamine võtta kaua aega. Vite'i nipp on see vahele jätta arenduse ajal ja lasta brauseril faile vajaduse järgi laadida. Tootmise jaoks pakendab see siiski — alates Vite 8-st, koos Rolldown nimelise pakendajaga — sest paljud väikesed failid on külastajatele aeglasemad kui mõned optimeeritud failid.

Töönäide: mis on Vite projekti sees

Siin on umbes, kuidas näeb välja väike Vite + React rakendus:

my-app/
  index.html          ← üks HTML leht, millest rakendus algab
  package.json        ← teekide ja skriptide loend (dev, build)
  vite.config.ts      ← Vite seaded ja pluginad
  src/
    main.tsx          ← käivitab Reacti ja paigaldab selle index.html-i
    App.tsx           ← su rakenduse ülemine komponent
    index.css         ← stiilid, nt @import "tailwindcss";
  public/             ← failid, mis kopeeritakse muutmata kujul (favicon, robots.txt)

Ja skriptid failis package.json:

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

Jälgi nüüd ühte muudatust:

1. Palud AI-l „tee pealkiri siniseks“.
2. See muudab klassi failis App.tsx.
3. Vite märkab faili muutust, teisendab ainult selle faili ja saadab uuenduse brauserisse.
4. Pealkiri muutub eelvaates siniseks, tavaliselt sekundi jooksul.

Kui avaldad, loob vite build midagi sellist nagu dist/index.html ja dist/assets/index-a1b2c3.js. Juhuslikult näiv osa failinimest muutub alati, kui sisu muutub, nii et brauserid ja CDN-id saavad faile pikalt vahemällu hoida ilma vananenud koodi serveerimata.

Keskkonnamuutujad Vite'is

Vite avaldab brauserikoodile ainult muutujad, mille nimed algavad VITE_-ga, näiteks VITE_PUBLIC_MAP_ID. See on turvameede: kõike, mis on brauserikoodis, saavad külastajad näha, seega salajased võtmed ei tohi seda eesliidet kanda ja peavad jääma tagaossa. Vaata keskkonnamuutujad ja saladused.

Põhimõisted

Levinud väärarusaamad

• „Vite on raamistik.“ See on ehitustööriist. React, Vue või Svelte on raamistik; Vite käivitab ja pakendab seda.
• „Vite rakendus sisaldab tagaosa.“ Tavaline Vite rakendus on ainult esiosa. Andmebaasid, sisselogimised ja salajased võtmed vajavad kõrvale serverit või API-d.
• „Arendusserveri võib võrku panna.“ See ei ole mõeldud päris liikluseks. Avalda alati tootmisehituse väljund.
• „Kõik .env-is on salajane.“ Vite rakenduses VITE_ muutujad pannakse failidesse, mille iga külastaja alla laadib.
• „Lehe 404 vigu pärast värskendamist tähendab, et rakendus on katki.“ Ühelehe rakenduses peab majutus saatma iga tee tagasi index.html-ile. See on majutuse seade — vaata kuidas parandada 404 vead pärast avaldamist.

Mida paluda AI-ehitajalt

• „Kas see rakendus on ainult Vite (esiosa) või on tal ka tagaosa? Kus iga osa töötab?“
• „Käivita tootmisehitus ja paranda kõik vead ja hoiatused enne avaldamist.“
• „Kontrolli, et salajased võtmed poleks VITE_ muutujates ega esiosa koodis.“
• „Eelvaade näitab tühja lehte — kontrolli Vite'i ja brauseri konsooli vigu ning paranda põhjus.“ Vaata kuidas parandada tühja valget lehte.
• „Veendu, et iga lehe URL töötab pärast avaldamist, mitte ainult avaleht.“

Vite Mythexis

Iga uus Mythexi projekt algab Vite'iga, kui ei palu Next.js-i, staatilist HTML-i ega muud tagaosa. Sinu privaatses liivakastis olev elav eelvaade uueneb agendi failide muutmisel ja avaldamine ehitab rakenduse ning paigaldab selle — sul pole vaja ise majutust seadistada. Kui hiljem vajad API-d või andmebaasi, palu seda vestluses ja Mythex saab lisada tagaosa teenuse koos Vite'i esiosaga (mitme teenusega rakendused).

Küsimused