Hvað er Vite? Einföld leiðsögn fyrir smiði forrita

Vite (borið fram „veet“, franska orðið fyrir „fljótur“) er smíðatól fyrir vefsíður og vefforrit. Meðan þú smíðar keyrir það þróunarþjón sem sýnir breytingar þínar í vafranum nánast samstundis. Þegar þú ert tilbúin/n að birta pakkar það kóðanum í litlar, bjartsýndar skrár sem hvaða vefhýsingarþjónusta sem er getur þjónað. Það er ókeypis, opinn hugbúnaður og sjálfgefið tól á bak við mörg React-, Vue- og Svelte-verkefni.

Af hverju Vite skiptir máli þegar þú smíðar með gervigreind

Þú skrifar kannski aldrei Vite-skipun, en ef appið þitt var smíðað með AI-smið keyrir Vite það líklega. Mythex byrjar nýjar verkefni á Vite + React + TypeScript + Tailwind nema þú biðjir um eitthvað annað (hvernig tæknin er valin).

Að vita hvað Vite gerir hjálpar þér að:

• Skilja forskoðunina. Lifandi forskoðunin sem uppfærist þegar gervigreindin breytir skrám er yfirleitt þróunarþjónn Vite.
• Skilja birtingu. Vite-app verður að möppu af kyrrstæðum skrám (HTML, JavaScript, CSS og myndum), sem er ódýrt og einfalt að hýsa.
• Lesa villuskilaboð. Þegar forskoðunin sýnir rauða villuyfirlögn eða auða síðu er það oft Vite sem tilkynnir að skrá hafi ekki þýðst.
• Þekkja takmörk þess. Vite smíðar framendann. Ef appið þarf bakenda, eins og gagnagrunn, leyndarlykla fyrir API eða greiðslur, keyrir það annars staðar. Sjá framendi vs. bakendi.

Hversdagsdæmi

Hugsaðu um veitingaeldhús.

• Í undirbúningi fyrir þjónustu (þróun) smakkar kokkurinn og stillir hvern rétt jafnóðum. Breyttu kryddinu, smakkaðu aftur sekúndu síðar. Það er þróunarþjónn Vite: þú breytir skrá og síðan uppfærist strax, oft án þess að tapa því sem þú slóst inn í eyðublað.
• Fyrir veisluþjónustupöntun (framleiðsla) er allt eldað, skammtað, pakkað og merkt svo það ferðist vel og sé hægt að bera fram hvar sem er. Það er vite build: kóðinn þinn er bundinn saman, minnkaður og merktur með fingrafari í skrár sem eru tilbúnar fyrir hvaða hýsingu sem er.

Sömu uppskriftirnar, tvær mjög ólíkar leiðir til að vinna með þær, og Vite gerir hvort tveggja.

Hvað Vite gerir í raun

Nútímalegt vefapp er gert úr mörgum skrám: íhlutum, stílum, myndum og þriðju aðila söfnum. Vafrar geta ekki notað allt það eins og það er skrifað. TypeScript þarf að verða að JavaScript, JSX frá React þarf að umbreytast og Tailwind-klasar þurfa að verða að CSS.

Vite meðhöndlar þetta í tveimur stillingum:

Eldri verkfæri bundu allt appið saman áður en nokkuð var birt, svo það gat tekið langan tíma að ræsa og uppfæra stórt verkefni. Bragð Vite er að sleppa því í þróun og leyfa vafranum að hlaða skrám eftir þörfum. Í framleiðslu bindur það enn, eins og frá og með Vite 8 með bundlera sem heitir Rolldown, vegna þess að margar litlar skrár eru hægari fyrir gesti en fáar bjartsýndar skrár.

Dæmi: það sem er í Vite-verkefni

Hér er nokkurn veginn það sem lítið Vite + React-app lítur út fyrir:

my-app/
  index.html          ← eina HTML-síðan sem appið byrjar á
  package.json        ← listi yfir söfn og skipanir (dev, build)
  vite.config.ts      ← Vite-stillingar og viðbætur
  src/
    main.tsx          ← ræsir React og festir það í index.html
    App.tsx           ← efsti íhluturinn í appinu þínu
    index.css         ← stílar, t.d. @import "tailwindcss";
  public/             ← skrár sem eru afritaðar óbreyttar (favicon, robots.txt)

Og skipanirnar í package.json:

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

Nú fylgjum við einni breytingu:

1. Þú biður gervigreindina um „gerðu fyrirsögnina bláa“.
2. Hún breytir klasa í App.tsx.
3. Vite tekur eftir því að skráin breyttist, umbreytir aðeins þeirri skrá og sendir uppfærsluna í vafrann.
4. Fyrirsögnin verður blá í forskoðuninni, yfirleitt innan einnar sekúndu.

Þegar þú birtir býr vite build til eitthvað í líkingu við dist/index.html ásamt dist/assets/index-a1b2c3.js. Tilviljunarkenndi hlutinn í skráarheitinu breytist þegar innihaldið breytist, svo vafrar og CDN geta geymt skrár í skyndiminni lengi án þess að birta gamlan kóða.

Umhverfisbreytur í Vite

Vite sýnir aðeins breytur sem heita byrjar á VITE_ fyrir kóða í vafranum, til dæmis VITE_PUBLIC_MAP_ID. Það er öryggisráðstöfun: allt í kóða vafrans getur gestir séð, svo leyndir lyklar mega aldrei hafa það forskeyti og verða að vera á bakenda. Sjá umhverfisbreytur og leyndarmál.

Lykilhugtök

Algengar ranghugmyndir

• „Vite er rammi.“ Það er smíðatól. React, Vue eða Svelte er rammi; Vite keyrir hann og pakkar honum.
• „Vite-app inniheldur bakenda.“ Venjulegt Vite-app er aðeins framendi. Gagnagrunnar, innskráningar og leyndir lyklar þurfa þjón eða API með sér.
• „Þróunarþjóninn má setja á netið.“ Hann er ekki ætlaður fyrir raunverulega umferð. Birtu alltaf úttak framleiðslusmíðarinnar.
• „Allt í .env er leyndarmál.“ Í Vite-appi eru VITE_-breytur settar inn í skrárnar sem hver gestur sækir.
• „Ef endurhlaða síðu gefur 404 er appið bilað.“ Í einsíðu-appi þarf hýsingin að senda allar leiðir til baka á index.html. Það er stilling hjá hýsingunni, sjá hvernig þú lagar 404-villur eftir birtingu.

Hvað á að biðja AI-smiðinn um

• „Er þetta app eingöngu Vite (framendi), eða er líka bakendi? Hvar keyrir hvor hluti?“
• „Keyrðu framleiðslusmíðina og lagaðu allar villur og viðvaranir áður en ég birti.“
• „Staðfestu að engir leyndir lyklar séu í VITE_-breytum eða neins staðar í framendakóðanum.“
• „Forskoðunin sýnir auða síðu. Athugaðu Vite- og vafraskjátvillurnar og lagaðu orsökina.“ Sjá hvernig þú lagar auða hvíta síðu.
• „Gakktu úr skugga um að endurhleðsla á hvaða síðuslóð sem er virki eftir birtingu, ekki bara á forsíðunni.“

Vite í Mythex

Hvert nýtt Mythex-verkefni byrjar á Vite nema þú biðjir um Next.js, kyrrstæðar HTML-síður eða annan bakenda. Lifandi forskoðunin í einkaumhverfinu þínu uppfærist þegar agentinn breytir skrám, og Birta byggir appið og setur það út. Þú þarft ekki að setja upp hýsingu sjálf/ur. Ef þú þarft síðar API eða gagnagrunn skaltu biðja um það í spjallinu og Mythex getur bætt bakendaþjónustu við Vite-framendann (fjölþjónustuöpp).

Spurningar