Skip to content

La herramienta Vite

Vite (pronunciado "vit", del francés "rápido") es una herramienta moderna de desarrollo y construcción de aplicaciones web creada por Evan You (el creador de Vue.js). Podéis consultar información al respecto en su web oficial.

Su objetivo es:

  • Ofrecer un entorno de desarrollo ultrarrápido.
  • Generar un empaquetado (bundle) optimizado y minificado para producción.

Vite tiene dos modos principales:

  • Modo desarrollo (vite): usa ES Modules nativos (ESM) y un servidor de desarrollo ultrarrápido que carga solo lo que el navegador necesita, sin empaquetar toda la app. Esto hace que el arranque sea casi instantáneo.
  • Modo producción (vite build): usa Rollup internamente, un empaquetador de módulos, para empaquetar todo el código (JS, CSS, imágenes, etc.), minificar los archivos (reducir el tamaño quitando comentarios y elementos innecesarios) y optimizar otros aspectos.

1. Instalación y primeros pasos

Como paso previo para usar Vite debemos tener instalado NodeJS. Podemos consultar aquí cómo descargar e instalar este entorno de ejecución JavaScript.

Una vez tengamos Node instalado, usamos su herramienta npm para crear una estructura básica de proyecto:

npm create vite@latest nombre-app

Deberemos elegir con qué framework queremos trabajar (Vanilla para usar JS tradicional, o bien algún framework concreto como React o Vue).

Esto crea una estructura de archivos y carpetas similar a esta:

nombre-app/
├─ index.html
├─ package.json
└─ public/
└─ src/
   ├─ main.js
   └─ style.css

Nota

Es posible que se generen algunos archivos más, de imágenes de prueba y comportamiento JavaScript adicional para un pequeño ejemplo. Pero podemos borrar el resto de ficheros que pueda haber y adaptar el contenido a nuestras necesidades.

Deberemos ejecutar npm install para instalar las dependencias iniciales del proyecto. Lo siguiente que tendremos que hacer será editar los archivos (index.html con el contenido raíz, style.css con los estilos generales de la aplicación, main.js con el comportamiento JavaScript que queramos añadir, y otras páginas que queramos incorporar).

2. Ejecución y empaquetado

Una vez tengamos nuestro proyecto listo, o queramos hacer alguna prueba intermedia, podemos ejecutarlo.

  • Para una ejecución en modo desarrollo usamos el comando npm run dev desde la carpeta raíz del proyecto. Esto lanzará un servidor local para poder probar nuestra aplicación optimizada.
  • Para empaquetar la aplicación para producción ejecutamos npm run build, que generará una carpeta dist con el contenido HTML y una subcarpeta assets con el contenido CSS y JavaScript minificado y optimizado. Podemos verificarlo con npm run preview y abrir el enlace que nos proporciona.

2.1. Gestión de los estilos

Si echas un vistazo a la estructura generada por Vite, verás que el fichero index.html no incorpora ningún documento CSS, sino que sólo carga el fichero JavaScript principal src/main.js que, a su vez, importa el CSS. Esto es algo muy común en sistemas de empaquetado como Vite o similares (WebPack, Parcel...), porque permite que el fichero JavaScript gestione, optimice y cargue el CSS en las páginas.

2.2. Otros contenidos estáticos. La carpeta public

Si necesitamos incluir otros contenidos estáticos (tales como imágenes o vídeos) podemos referenciarlos desde el contenido HTML o importarlos en JavaScript. Todos los archivos referenciados serán ubicados en la subcarpeta dist/assets al empaquetar la aplicación, y la propia herramienta Vite se encargará de cambiar la ruta correspondiente.

Además, disponemos de una carpeta public donde ubicar archivos estáticos. Los archivos de esta carpeta se ubicarán en la carpeta raíz dist al empaquetar, por lo que es importante referenciarlos como si estuvieran en la misma carpeta que el fichero index.html, o raíz del servidor.

2.3. Sitios multipágina

Vite está más pensado para SPA (Single Page Applications), que son las que suelen hacerse con frameworks de desarrollo como React, Angular o Vue. Pero si necesitamos incluir más páginas HTML en nuestro proyecto, podemos definirlas en la raíz del proyecto, y luego editar un fichero de configuración vite.config.js y especificar qué documentos HTML tiene nuestra aplicación, y que serán incluidos en dist. Aquí vemos un ejemplo:

import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'index.html'),
        prueba: resolve(__dirname, 'prueba.html'),
      },
    },
  },
})

Ejercicio 1

Utiliza este ejemplo como punto de partida y crea un proyecto Vite con él. Añade en alguna de las cajas una imagen (por ejemplo, el logo de Vite), y ubícalo en la carpeta public. Prueba a ejecutarlo en local (npm run dev) y a empaquetarlo.