Vite

Vite es una herramienta de compilación de frontend súper rápida para aplicaciones web de próxima generación.

vite

¿Qué es Vite?

Vite es una herramienta de compilación para aplicaciones web modernas. Si durante muchos años webpack ha dominado la escena de este tipo de herramientas que sirven, compilan y empaquetan aplicaciones frontend, Vite ha sido un soplo de aire fresco. Destaca principalmente por su facilidad de configuración y por la impresionante velocidad en la que procesa y sirve los archivos, que sin lugar a duda mejora la experiencia del desarrollador.

Vite ofrece dos funcionalidades principales:

  • Un servidor de desarrollo que proporciona múltiples características. Como Typescript sin dependencias externas, módulos ES nativos y Hot Module Replacement súper rápido entre otras muchas.
  • Un comando para compilar y empaquetar código frontend con Rollup.

Instalar vite

Ejecuta este comando en la consola. Asegúrate de tener instalado Node.js > 18.

Terminal
npm create vite@latest

Y sigue las instrucciones. Por defecto podrás escoger sobre una multitud de plantillas:

Vanilla
Vue
React
Preact
Lit
Svelte
Solid
Qwik
Angular
Others

Y seleccionar si quieres que tu proyecto use Javascript o Typescript.

Finalmete puedes acceder al proyecto creado e instalar dependecias:

Terminal
cd vite-project
npm install
npm run dev

Al entrar al directorio verás que hay un archivo index.html. Es el archivo de entrada del servidor en modo desarrollo.

Configurar vite

Una de las principales características de Vite es que es muy sencillo e intuitivo de configurar. En la carpeta raíz del proyecto hay un archivo llamado vite.config.js. Es un archivo Javascript en el que puedes definir las diferentes configuraciones:

export default {
}

Puedes ver todas las opciones en la documentación de configuración.

Ejecutar y compilar la aplicación

Si te fijas, Vite ha creado otro archivo en la carpeta raíz del proyecto llamado packaje.json.

{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"devDependencies": {
"typescript": "~5.6.2",
"vite": "^6.0.1"
}
}

En la sección scripts hay los distintos comandos que puedes ejecutar con npm para manjear la aplicación. Si quieres arrancar el servidor de desarrollo en local puedes escribir en la línea de comandos

Terminal
npm run dev

Este comando ejecutará el servidor web. Por defecto en la url http://localhost:5173/ si el puerto no está ocupado. Sino usará el 5174, y así sucesivamente.

Y si quieres compilar la aplicación

Terminal
npm run build

Por defecto te creará los archivos de distribución de tu aplicación web en la carpeta dist:

> tsc && vite build
vite v6.0.3 building for production...
✓ 7 modules transformed.
dist/index.html 0.46 kB │ gzip: 0.29 kB
dist/assets/index-dv8c_Ups.css 1.21 kB │ gzip: 0.62 kB
dist/assets/index-D12_I9U1.js 3.05 kB │ gzip: 1.64 kB
✓ built in 126ms

Conclusión

Hemos visto que es Vite, sus principales características y como funciona de manera muy superficial. Espero que te sirva como punto de entrada a esta magnífica herramienta, y no dudes en consultar la documentación oficial para ampliar tus conocimientos sobre Vite si lo necesitas documentación oficial.