Què és Vite? Guia en llenguatge senzill per a creadors d'apps

Vite (es pronuncia «vit», que en francès vol dir «ràpid») és una eina de compilació per a llocs web i apps web. Mentre construeixes, executa un servidor de desenvolupament que mostra els canvis al navegador gairebé a l'instant. Quan estàs a punt per llançar, empaqueta el teu codi en fitxers petits i optimitzats que qualsevol allotjament web pot servir. És gratuïta, de codi obert i l'eina per defecte darrere de molts projectes de React, Vue i Svelte.

Per què Vite importa quan construeixes amb IA

Potser mai no escrius una ordre de Vite, però si la teva app s'ha construït amb un constructor d'apps d'IA, probablement la executa Vite. Mythex comença els projectes nous amb Vite + React + TypeScript + Tailwind tret que demanis una altra cosa (com es tria la tecnologia).

Saber què fa Vite t'ajuda a:

• Entendre la vista prèvia. La vista prèvia en directe que s'actualitza mentre la IA edita fitxers sol ser un servidor de desenvolupament de Vite.
• Entendre el desplegament. Una app de Vite es converteix en una carpeta de fitxers estàtics —HTML, JavaScript, CSS i imatges—, que és barat i simple d'allotjar.
• Llegir els missatges d'error. Quan la vista prèvia mostra una capa d'error vermella o una pàgina en blanc, sovint és Vite que informa que un fitxer no s'ha pogut compilar.
• Conèixer els seus límits. Vite compila el frontend. Si la teva app necessita un backend —una base de dades, claus d'API secretes, pagaments—, això s'executa en un altre lloc. Consulta frontend contra backend.

Una analogia quotidiana

Pensa en la cuina d'un restaurant.

• Durant la preparació del servei (desenvolupament), el cuiner tasta i ajusta cada plat mentre treballa. Canvies el condiment, el tastes de nou un segon després. Això és el servidor de desenvolupament de Vite: canvies un fitxer, la pàgina s'actualitza a l'instant, sovint sense perdre fins i tot el que havies escrit en un formulari.
• Per a una comanda de càtering (producció), tot es cuina, es porciona, s'empaqueta i s'etiqueta perquè viatgi bé i es pugui servir a qualsevol lloc. Això és vite build: el teu codi es agrupa, es redueix i es marca amb noms de fitxer únics en fitxers preparats per a qualsevol allotjament.

Mateixes receptes, dues maneres molt diferents de gestionar-les, i Vite fa les dues.

Què fa realment Vite

Una app web moderna està formada per molts fitxers: components, estils, imatges i biblioteques de tercers. Els navegadors no poden fer servir tot això tal com està escrit. TypeScript s'ha de convertir en JavaScript, el JSX de React s'ha de transformar i les classes de Tailwind s'han de convertir en CSS.

Vite ho gestiona en dos modes:

Les eines més antigues agrupaven tota l'app abans de mostrar res, així que iniciar i actualitzar un projecte gran podia trigar molt. El truc de Vite és saltar-se aquest pas durant el desenvolupament i deixar que el navegador carregui els fitxers quan calgui. Per a producció, encara agrupa —a partir de Vite 8, amb un empaquetador anomenat Rolldown—, perquè molts fitxers petits són més lents per als visitants que uns pocs d'optimitzats.

Un exemple pràctic: què hi ha dins d'un projecte de Vite

Així és aproximadament una app petita de Vite + React:

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)

I els scripts de package.json:

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

Segueix ara un sol canvi:

1. Demanes a la IA que «posi el títol en blau».
2. Edita una classe a App.tsx.
3. Vite detecta que el fitxer ha canviat, transforma només aquest fitxer i envia l'actualització al navegador.
4. El títol es torna blau a la vista prèvia, normalment en menys d'un segon.

Quan publiques, vite build produeix alguna cosa com dist/index.html més dist/assets/index-a1b2c3.js. Aquella part del nom del fitxer que sembla aleatòria canvia cada vegada que canvia el contingut, de manera que els navegadors i les CDN poden guardar els fitxers a la memòria cau durant molt de temps sense servir codi obsolet.

Variables d'entorn a Vite

Vite només exposa al codi del navegador les variables que comencen per VITE_, per exemple VITE_PUBLIC_MAP_ID. És una mesura de seguretat: qualsevol cosa que hi hagi al codi del navegador la pot veure qualsevol visitant, així que les claus secretes mai no han de dur aquest prefix i han de quedar-se en un backend. Consulta variables d'entorn i secrets.

Termes clau

Idees errònies habituals

• «Vite és un framework.» És una eina de compilació. React, Vue o Svelte és el framework; Vite l'executa i l'empaqueta.
• «Una app de Vite inclou un backend.» Una app estàndard de Vite és només frontend. Les bases de dades, els inicis de sessió i les claus secretes necessiten un servidor o una API al costat.
• «El servidor de desenvolupament es pot posar en línia.» No està pensat per al trànsit real. Despliega sempre la sortida de la compilació de producció.
• «Tot el que hi ha a .env és secret.» En una app de Vite, les variables VITE_ s'incrusten als fitxers que descarrega cada visitant.
• «Si refrescar una pàgina dona un 404, l'app està trencada.» En una app d'una sola pàgina, l'allotjament ha de retornar totes les rutes a index.html. És una configuració d'allotjament; consulta com arreglar errors 404 després de desplegar.

Què demanar al teu constructor d'IA

• «Aquesta app és només de Vite (frontend), o també té backend? On s'executa cada part?»
• «Executa la compilació de producció i corregeix tots els errors o avisos abans de publicar.»
• «Comprova que cap clau secreta sigui a variables VITE_ ni en qualsevol lloc del codi frontend.»
• «La vista prèvia mostra una pàgina en blanc: revisa els errors de Vite i de la consola del navegador i corregeix la causa.» Consulta com arreglar una pàgina en blanc.
• «Assegura't que refrescar qualsevol URL de pàgina funcioni després de publicar, no només la pàgina d'inici.»

Vite a Mythex

Cada projecte nou de Mythex comença amb Vite tret que demanis Next.js, HTML estàtic o un backend diferent. La vista prèvia en directe del teu entorn privat s'actualitza mentre l'agent edita fitxers, i Publicar compila l'app i la despliega; no has de configurar tu mateix cap allotjament. Si més endavant necessites una API o una base de dades, demana-ho al xat i Mythex pot afegir un servei de backend al costat del frontend de Vite (apps de múltiples serveis).

Preguntes