Mikä on Vite? Selkokielinen opas sovellusten rakentajille

Vite (lausutaan ”veet”, ranskaksi ”nopea”) on rakennustyökalu verkkosivuille ja verkkosovelluksille. Rakentaessasi se ajaa kehityspalvelinta, joka näyttää muutoksesi selaimessa lähes välittömästi. Kun olet valmis julkaisuun, se paketoi koodisi pieniksi, optimoiduiksi tiedostoiksi, joita mikä tahansa verkkopalvelin voi tarjota. Se on ilmainen, avoimen lähdekoodin ja monien React-, Vue- ja Svelte-projektien oletustyökalu.

Miksi Vite on tärkeä, kun rakennat tekoälyllä

Saatat koskaan kirjoittaa Vite-komentoa, mutta jos sovelluksesi on rakennettu tekoälysovelluksen rakentajalla, Vite todennäköisesti ajaa sitä. Mythex aloittaa uudet projektit Vite + React + TypeScript + Tailwind -pinolla, ellet pyydä jotain muuta (miten tekniikka valitaan).

Vitén toiminnan tunteminen auttaa sinua seuraavissa:

• Esikatselun ymmärtäminen. Live-esikatselu, joka päivittyy tekoälyn muokatessa tiedostoja, on tyypillisesti Viten kehityspalvelin.
• Julkaisun ymmärtäminen. Vite-sovellus muuttuu kansioksi staattisia tiedostoja – HTML, JavaScript, CSS ja kuvat – mikä on halpaa ja yksinkertaista isännöidä.
• Virheilmoitusten lukeminen. Kun esikatselussa näkyy punainen virhepeitto tai tyhjä sivu, syynä on usein Vite, joka ilmoittaa tiedoston kääntymisen epäonnistuneen.
• Sen rajojen tunteminen. Vite rakentaa käyttöliittymän. Jos sovelluksesi tarvitsee taustapalvelun – tietokannan, salaisia API-avaimia, maksut – se toimii muualla. Katso etu- ja taustapuoli.

Arkinen vertaus

Ajattele ravintolan keittiötä.

• Valmistelun aikana (kehitys) kokki maistaa ja säätää jokaista annosta matkan varrella. Muuta mausteita, maista uudelleen sekunnin päästä. Tämä on Viten kehityspalvelin: muokkaat tiedostoa, sivu päivittyy heti, usein menettämättä lomakkeeseen kirjoittamaasi.
• Cateringtilaukselle (tuotanto) kaikki valmistetaan, annostellaan, pakataan ja merkitään, jotta se kestää kuljetuksen ja voidaan tarjoilla minne tahansa. Tämä on vite build: koodisi kootaan, pienennetään ja varustetaan tunnisteilla valmiiksi mihin tahansa palveluun.

Samat reseptit, kaksi hyvin erilaista tapaa käsitellä niitä – ja Vite tekee molemmat.

Mitä Vite todella tekee

Nykyaikainen verkkosovellus koostuu monista tiedostoista: komponenteista, tyyleistä, kuvista ja kolmannen osapuolen kirjastoista. Selaimet eivät voi käyttää kaikkea sellaisenaan. TypeScript on muutettava JavaScriptiksi, Reactin JSX on muunnettava, ja Tailwind-luokat on muutettava CSS:ksi.

Vite hoitaa tämän kahdessa tilassa:

Vanhemmat työkalut kokosivat koko sovelluksen ennen kuin näyttivät mitään, joten suuren projektin käynnistäminen ja päivittäminen saattoi kestää pitkään. Viten temppu on ohittaa tämä kehityksen aikana ja antaa selaimen ladata tiedostot tarpeen mukaan. Tuotannossa se yhä kokoaa koodin – Viten versiosta 8 alkaen Rolldown-nimisellä kokoajalla – koska monet pienet tiedostot ovat kävijöille hitaampia kuin muutama optimoitu.

Esimerkki: mitä Vite-projektin sisällä on

Tässä suunnilleen, miltä pieni Vite + React -sovellus näyttää:

my-app/
  index.html          ← ainoa HTML-sivu, josta sovellus alkaa
  package.json        ← lista kirjastoista ja komennoista (dev, build)
  vite.config.ts      ← Viten asetukset ja liitännäiset
  src/
    main.tsx          ← käynnistää Reactin ja liittää sen index.html-tiedostoon
    App.tsx           ← sovelluksesi ylätason komponentti
    index.css         ← tyylit, esim. @import "tailwindcss";
  public/             ← tiedostot, jotka kopioidaan sellaisenaan (favicon, robots.txt)

Ja package.json-tiedoston komennot:

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

Seuraa nyt yhtä muutosta:

1. Pyydät tekoälyä: ”tee otsikosta sininen”.
2. Se muokkaa luokkaa tiedostossa App.tsx.
3. Vite huomaa tiedoston muuttuneen, muuntaa vain sen ja työntää päivityksen selaimeen.
4. Otsikko muuttuu siniseksi esikatselussa, yleensä alle sekunnissa.

Kun julkaiset, vite build tuottaa jotain sellaista kuin dist/index.html ja dist/assets/index-a1b2c3.js. Satunnaisen näköinen osa tiedostonimessä muuttuu aina, kun sisältö muuttuu, joten selaimet ja CDN:t voivat tallentaa tiedostot pitkäksi aikaa välimuistiin ilman vanhentuneen koodin tarjoamista.

Ympäristömuuttujat Vitessä

Vite paljastaa selaimen koodille vain muuttujat, joiden nimi alkaa VITE_-etuliitteellä, esimerkiksi VITE_PUBLIC_MAP_ID. Se on turvatoimi: kaikki selaimen koodissa voivat kävijät nähdä, joten salaisten avainten ei koskaan pidä saada tuota etuliitettä, ja niiden on pysyttävä taustapalvelussa. Katso ympäristömuuttujat ja salaisuudet.

Keskeiset termit

Yleiset väärinkäsitykset

• ”Vite on kehys.” Se on rakennustyökalu. React, Vue tai Svelte on kehys; Vite ajaa ja paketoi sen.
• ”Vite-sovellus sisältää taustapalvelun.” Tavallinen Vite-sovellus on pelkkä käyttöliittymä. Tietokannat, kirjautumiset ja salaiset avaimet tarvitsevat palvelimen tai API:n rinnalleen.
• ”Kehityspalvelin sopii verkkoon.” Se ei ole tarkoitettu todelliselle liikenteelle. Julkaise aina tuotantokäännöksen tulos.
• ”Kaikki .env-tiedostossa on salaista.” Vite-sovelluksessa VITE_-muuttujat upotetaan tiedostoihin, jotka jokainen kävijä lataa.
• ”404-virhe sivun päivittämisen jälkeen tarkoittaa, että sovellus on rikki.” Yksisivuisessa sovelluksessa palvelimen täytyy ohjata jokainen reitti takaisin index.html-tiedostoon. Se on isäntäpalvelun asetus – katso 404-virheiden korjaaminen julkaisun jälkeen.

Mitä pyytää tekoälyrakentajaltasi

• ”Onko tämä sovellus pelkkä Vite (käyttöliittymä), vai onko siinä myös taustapalvelu? Missä kukin osa ajetaan?”
• ”Aja tuotantokäännös ja korjaa kaikki virheet ja varoitukset ennen julkaisua.”
• ”Varmista, ettei salaisia avaimia ole VITE_-muuttujissa tai missään etupään koodissa.”
• ”Esikatselu näyttää tyhjän sivun – tarkista Viten ja selaimen konsolin virheet ja korjaa syy.” Katso miten korjaat tyhjän valkoisen sivun.
• ”Varmista, että minkä tahansa sivun URL-osoitteen päivittäminen toimii julkaisun jälkeen, ei vain etusivulla.”

Vite Mythexissä

Jokainen uusi Mythex-projekti alkaa Vitellä, ellet pyydä Next.js:ää, staattista HTML:ää tai eri taustapalvelua. Yksityisessä hiekkalaatikossasi oleva live-esikatselu päivittyy agentin muokatessa tiedostoja, ja Julkaise rakentaa sovelluksen ja julkaisee sen – sinun ei tarvitse pystyttää isännöintiä itse. Jos myöhemmin tarvitset API:n tai tietokannan, pyydä sitä chatissa, ja Mythex voi lisätä taustapalvelun Viten rinnalle (monipalvelu-sovellukset).

Kysymykset