Vite es una herramienta de compilación de frontend súper rápida para aplicaciones web de próxima generación.
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:
Ejecuta este comando en la consola. Asegúrate de tener instalado Node.js > 18.
npm create vite@latest
Y sigue las instrucciones. Por defecto podrás escoger sobre una multitud de plantillas:
VanillaVueReactPreactLitSvelteSolidQwikAngularOthers
Y seleccionar si quieres que tu proyecto use Javascript o Typescript.
Finalmete puedes acceder al proyecto creado e instalar dependecias:
cd vite-projectnpm installnpm run dev
Al entrar al directorio verás que hay un archivo index.html. Es el archivo de entrada del servidor en modo desarrollo.
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.
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
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
npm run build
Por defecto te creará los archivos de distribución de tu aplicación web en la carpeta dist:
> [email protected] build> tsc && vite build
vite v6.0.3 building for production...✓ 7 modules transformed.dist/index.html 0.46 kB │ gzip: 0.29 kBdist/assets/index-dv8c_Ups.css 1.21 kB │ gzip: 0.62 kBdist/assets/index-D12_I9U1.js 3.05 kB │ gzip: 1.64 kB✓ built in 126ms
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.