Kas ir Vite? Vienkārša rokasgrāmata lietotņu veidotājiem

Vite (izrunā „vīts”, franču valodā „ātri”) ir būvēšanas rīks vietnēm un tīmekļa lietotnēm. Kamēr veidojat, tas palaiž izstrādes serveri, kas parāda jūsu izmaiņas pārlūkprogrammā gandrīz uzreiz. Kad esat gatavs publicēt, tas savāc jūsu kodu nelielos, optimizētos failos, ko var apkalpot jebkurš tīmekļa hostings. Tas ir bezmaksas, atvērtā koda rīks un noklusējuma rīks aiz daudzām React, Vue un Svelte projektām.

Kāpēc Vite ir svarīgs, veidojot ar AI

Iespējams, nekad neuzrakstīsiet nevienu Vite komandu, bet, ja jūsu lietotne ir veidota ar AI lietotņu veidotāju, to visticamāk darbina Vite. Mythex jaunus projektus sāk ar Vite + React + TypeScript + Tailwind, ja vien neprasāt ko citu (kā tiek izvēlēts tehnoloģiju steks).

Zinot, ko dara Vite, jūs varat:

• Saprast priekšskatījumu. Tiešraides priekšskatījums, kas atjaunojas, kamēr AI rediģē failus, parasti ir Vite izstrādes serveris.
• Saprast publicēšanu. Vite lietotne kļūst par statisku failu mapi — HTML, JavaScript, CSS un attēliem —, ko ir lēti un vienkārši hostēt.
• Lasīt kļūdu ziņojumus. Kad priekšskatījumā parādās sarkana kļūdas pārklājuma josla vai tukša lapa, bieži vien tas ir Vite, kas ziņo, ka fails nav izdevies kompilēt.
• Zināt tā robežas. Vite būvē frontend daļu. Ja jūsu lietotnei vajag backend — datubāzi, slepenās API atslēgas, maksājumus —, tas darbojas citur. Skatiet frontend un backend.

Ikdienas salīdzinājums

Padomājiet par restorāna virtuvi.

• Sagatavošanās laikā (izstrāde) pavārs nogaršo un pielāgo katru ēdienu, kamēr strādā. Maina garšvielas, un pēc sekundes nogaršo vēlreiz. Tas ir Vite izstrādes serveris: jūs maināt failu, un lapa atjaunojas uzreiz, bieži pat neizdzēšot to, ko esat ierakstījis veidlapā.
• Ēdienu pasūtījumam (produkcija) viss tiek pagatavots, porcionēts, iesaiņots un iezīmēts, lai tas labi pārvietotos un varētu tikt pasniegts jebkur. Tas ir vite build: jūsu kods tiek apkopots, samazināts un apzīmēts ar unikāliem identifikatoriem failos, kas gatavi jebkuram hostingam.

Tās pašas receptes, divi ļoti dažādi apstrādes veidi — un Vite dara abus.

Ko Vite patiesībā dara

Mūsdienu tīmekļa lietotne sastāv no daudziem failiem: komponentiem, stiliem, attēliem un trešo pušu bibliotēkām. Pārlūkprogrammas nevar izmantot visu to tā, kā tas ir uzrakstīts. TypeScript jāpārvērš JavaScript, React JSX jātransformē, un Tailwind klases jāpārvērš CSS.

Vite to apstrādā divos režīmos:

Vecākie rīki pirms kaut kā parādīšanas apvienoja visu lietotni, tāpēc liela projekta palaišana un atjaunināšana varēja aizņemt ilgu laiku. Vite triks ir izlaist to izstrādes laikā un ļaut pārlūkprogrammai ielādēt failus pēc vajadzības. Produkcijai tas joprojām apvieno — sākot ar Vite 8, ar apkopotāju Rolldown —, jo daudzi mazi faili apmeklētājiem ir lēnāki nekā daži optimizēti.

Darba piemērs: kas ir iekšā Vite projektā

Apmēram tā izskatās neliela Vite + React lietotne:

my-app/
  index.html          ← vienā HTML lapa, no kuras lietotne sākas
  package.json        ← bibliotēku un skriptu saraksts (dev, build)
  vite.config.ts      ← Vite iestatījumi un spraudņi
  src/
    main.tsx          ← palaiž React un ievieto to index.html
    App.tsx           ← jūsu lietotnes augstākā līmeņa komponents
    index.css         ← stili, piem., @import "tailwindcss";
  public/             ← faili, kas tiek kopēti kā ir (favicon, robots.txt)

Un skripti package.json failā:

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

Tagad sekojiet vienai izmaiņai:

1. Jūs lūdzat AI „padarīt virsrakstu zilu”.
2. Tas rediģē klasi failā App.tsx.
3. Vite pamana, ka fails ir mainījies, pārveido tieši šo failu un nosūta atjauninājumu pārlūkprogrammai.
4. Virsraksts priekšskatījumā kļūst zils, parasti vienas sekundes laikā.

Kad publicējat, vite build izveido kaut ko līdzīgu dist/index.html un dist/assets/index-a1b2c3.js. Failu nosaukuma nejaušā izskata daļa mainās katru reizi, kad mainās saturs, tāpēc pārlūkprogrammas un CDN var ilgi kešot failus, neapkalpojot novecojušu kodu.

Vides mainīgie Vite

Vite pārlūkprogrammas kodam dara pieejamus tikai mainīgos, kuru nosaukumi sākas ar VITE_, piemēram, VITE_PUBLIC_MAP_ID. Tas ir drošības pasākums: viss, kas atrodas pārlūkprogrammas kodā, apmeklētājiem ir redzams, tāpēc slepenajām atslēgām šim priedēklim nekad nedrīkst būt un tām jāpaliek backend daļā. Skatiet vides mainīgos un noslēpumus.

Biežāk lietoti termini

Biežākie nepareizi priekšstati

• „Vite ir ietvars.” Tas ir būvēšanas rīks. React, Vue vai Svelte ir ietvars; Vite to palaiž un iesaiņo.
• „Vite lietotnē ir backend.” Standarta Vite lietotne ir tikai frontend. Datubāzēm, pieteikšanās sistēmām un slepenajām atslēgām blakus vajag serveri vai API.
• „Izstrādes serveris drīkst atrasties tiešsaistē.” Tas nav paredzēts reālai trafikai. Vienmēr publicējiet produkcijas būvējuma rezultātu.
• „Viss .env ir slepens.” Vite lietotnē VITE_ mainīgie tiek iestrādāti failos, ko katrs apmeklētājs lejupielādē.
• „Ja lapas atsvaidzināšana dod 404, lietotne ir salauzta.” Vienlapas lietotnē hostingam jānosūta katrs maršruts atpakaļ uz index.html. Tas ir hostinga iestatījums — skatiet kā novērst 404 kļūdas pēc publicēšanas.

Ko prasīt no sava AI veidotāja

• „Vai šī lietotne ir tikai Vite (frontend), vai tai ir arī backend? Kur darbojas katra daļa?”
• „Palaidiet produkcijas būvēšanu un izlabojiet visas kļūdas vai brīdinājumus, pirms publicēju.”
• „Pārbaudiet, vai nevienas slepenas atslēgas nav VITE_ mainīgajos vai kaut kur frontend kodā.”
• „Priekšskatījums rāda tukšu lapu — pārbaudiet Vite un pārlūkprogrammas konsoles kļūdas un izlabojiet cēloni.” Skatiet kā novērst tukšu baltu lapu.
• „Pārliecinieties, ka pēc publicēšanas jebkuras lapas URL atsvaidzināšana darbojas, nevis tikai sākumlapa.”

Vite Mythex

Katrs jauns Mythex projekts sākas ar Vite, ja vien neprasāt Next.js, statisku HTML vai citu backend. Tiešraides priekšskatījums jūsu privātajā smilškastē atjaunojas, kamēr aģents rediģē failus, un Publish būvē lietotni un to izvieto — nav jāiestata hostings pašam. Ja vēlāk vajag API vai datubāzi, pajautājiet tērzēšanā, un Mythex var pievienot backend pakalpojumu blakus Vite frontend (daudzpakalpojumu lietotnes).

Jautājumi