Kas yra Vite? Paprastas vadovas programėlių kūrėjams

Vite (tariama „vyt“, prancūziškai reiškia „greitas“) – tai svetainių ir žiniatinklio programėlių kūrimo įrankis. Kurdami jis paleidžia kūrimo serverį, kuris rodo jūsų pakeitimus naršyklėje beveik akimirksniu. Kai esate pasiruošę paleisti, jis supakuoja kodą į mažus, optimizuotus failus, kuriuos gali patiekti bet kuris žiniatinklio serveris. Jis nemokamas, atviro kodo ir yra numatytasis įrankis daugelyje React, Vue ir Svelte projektų.

Kodėl Vite svarbus kuriant su AI

Gali būti, kad niekada neįvesite Vite komandos, bet jei jūsų programėlė sukurta su AI programėlių kūrimo įrankiu, greičiausiai ją paleidžia Vite. Mythex naujus projektus pradeda su Vite + React + TypeScript + Tailwind, nebent paprašote kitaip (kaip parenkamos technologijos).

Vite žinojimas padeda:

• Suprasti peržiūrą. Gyvoji peržiūra, kuri atsinaujina AI redaguojant failus, paprastai yra Vite kūrimo serveris.
• Suprasti diegimą. Vite programėlė tampa statinių failų aplanku – HTML, JavaScript, CSS ir paveikslėliais – kuris pigus ir paprastas talpinti.
• Skaityti klaidų pranešimus. Kai peržiūra rodo raudoną klaidos perdangą ar tuščią puslapį, dažnai tai Vite praneša, kad failo nepavyko sukompiliuoti.
• Žinoti jo ribas. Vite sukuria priekinę dalį. Jei programėlei reikia galinės dalies – duomenų bazės, slaptų API raktų, mokėjimų – ji veikia kitur. Žr. priekinė ir galinė dalys.

Kasdienė analogija

Pagalvokite apie restorano virtuvę.

• Ruošiantis aptarnavimui (kūrimas) šefas ragauja ir koreguoja kiekvieną patiekalą. Pakeiskite prieskonį ir ragaukite dar kartą sekundę vėliau. Tai yra Vite kūrimo serveris: pakeičiate failą, puslapis atsinaujina iš karto, dažnai nepraradę to, ką įrašėte formoje.
• Pagal kateringo užsakymą (gamyba) viskas iškepama, porcijuojama, supakuojama ir paženklinama, kad gerai keliautų ir būtų patiekiama bet kur. Tai yra vite build: jūsų kodas sujungiamas, sumažinamas ir pažymimas unikaliais failų pavadinimais, paruoštais bet kuriam serveriui.

Tie patys receptai, du visiškai skirtingi darbo būdai – ir Vite atlieka abu.

Ką iš tiesų daro Vite

Šiuolaikinė žiniatinklio programėlė susideda iš daugybės failų: komponentų, stilių, paveikslėlių ir trečiųjų šalių bibliotekų. Naršyklės negali naudoti viso to taip, kaip parašyta. TypeScript turi virsti JavaScript, React JSX turi būti transformuotas, o Tailwind klasės turi virsti CSS.

Vite tai daro dviem režimais:

Senesni įrankiai prieš rodydami bet ką supakuodavo visą programėlę, todėl didelio projekto paleidimas ar atnaujinimas galėjo užtrukti ilgai. Vite triukas – kūrimo metu to praleisti ir leisti naršyklei įkelti failus pagal poreikį. Gamybai jis vis tiek pakuoja – nuo Vite 8 su pakuotuvu Rolldown – nes daugybė mažų failų lankytojams lėtesnė nei keletas optimizuotų.

Darbo pavyzdys: kas yra Vite projekte

Štai maždaug kaip atrodo nedidelė Vite + React programėlė:

my-app/
  index.html          ← the one HTML page the app starts from
  package.json        ← list of libraries and scripts (dev, build)
  vite.config.ts      ← Vite settings and plugins
  src/
    main.tsx          ← starts React and mounts it into index.html
    App.tsx           ← your app's top-level component
    index.css         ← styles, e.g. @import "tailwindcss";
  public/             ← files copied as-is (favicon, robots.txt)

Ir skriptai package.json faile:

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

Dabar sekite vieną pakeitimą:

1. Paprašote AI „padaryk antraštę mėlyną“.
2. Jis redaguoja klasę App.tsx faile.
3. Vite pastebi, kad failas pasikeitė, transformuoja tik tą failą ir išsiunčia atnaujinimą naršyklei.
4. Antraštė peržiūroje tampa mėlyna, paprastai per sekundę.

Kai skelbiate, vite build sukuria kažką panašaus į dist/index.html ir dist/assets/index-a1b2c3.js. Atsitiktinai atrodanti failo pavadinimo dalis pasikeičia, kai pasikeičia turinys, todėl naršyklės ir CDN gali ilgai talpinti failus, neteikdami pasenusio kodo.

Aplinkos kintamieji Vite

Vite naršyklės kodui atskleidžia tik kintamuosius, kurių pavadinimai prasideda VITE_, pavyzdžiui, VITE_PUBLIC_MAP_ID. Tai saugumo priemonė: viską, kas yra naršyklės kode, gali matyti lankytojai, todėl slaptų raktų niekada nedėkite su šiuo priesagos prefiksu – jie turi likti galinėje dalyje. Žr. aplinkos kintamuosius ir paslaptis.

Pagrindiniai terminai

Dažni klaidingi įsitikinimai

• „Vite yra karkasas.“ Tai kūrimo įrankis. Karkasas yra React, Vue ar Svelte; Vite jį paleidžia ir supakuoja.
• „Vite programėlė apima galinę dalį.“ Standartinė Vite programėlė yra tik priekinė dalis. Duomenų bazės, prisijungimai ir slapti raktai reikalauja serverio ar API šalia.
• „Kūrimo serveris tinka skelbti internete.“ Jis nėra skirtas realiam srautui. Visada diekite gamybinio build rezultatą.
• „Viskas .env faile yra slaptas.“ Vite programėlėje VITE_ kintamieji įdedami į failus, kuriuos atsisiunčia kiekvienas lankytojas.
• „Puslapio atnaujinimas, kuris duoda 404, reiškia, kad programėlė sugedusi.“ Vieno puslapio programėlėje talpinimo serveris turi siųsti visus maršrutus atgal į index.html. Tai talpinimo nustatymas – žr. kaip ištaisyti 404 klaidas po diegimo.

Ko paprašyti AI kūrimo įrankio

• „Ar ši programėlė tik Vite (priekinė dalis), ar turi ir galinę dalį? Kur veikia kiekviena dalis?“
• „Paleisk gamybinį build ir ištaisyk visas klaidas bei įspėjimus prieš diegdamas.“
• „Patikrink, kad nė vienas slaptas raktas nėra VITE_ kintamuosiuose ar kur nors priekinės dalies kode.“
• „Peržiūra rodo tuščią puslapį – patikrink Vite ir naršyklės konsolės klaidas ir ištaisyk priežastį.“ Žr. kaip ištaisyti tuščią baltą puslapį.
• „Įsitikink, kad po diegimo veikia bet kurio puslapio URL atnaujinimas, ne tik pagrindinio puslapio.“

Vite Mythex

Kiekvienas naujas Mythex projektas pradedamas su Vite, nebent paprašote Next.js, statinio HTML ar kitos galinės dalies. Gyvoji peržiūra jūsų privačioje smėlio dėžėje atsinaujina, kai agentas redaguoja failus, o Publish sukuria programėlę ir ją diegia – jokio talpinimo nereikia nustatyti patiems. Jei vėliau prireiks API ar duomenų bazės, pasakykite pokalbyje ir Mythex gali pridėti galinės dalies paslaugą šalia Vite priekinės dalies (daugiapaslaugės programėlės).

Klausimai