Artículo original: Vite.js Tutorial – How to Install and Use Vite in Your Web Projects

Vite.js es una herramienta veloz de desarrollo de proyectos web modernos. Se enfoca en la velocidad, el desempeño y mejora la experiencia del desarrollador.

Vite usa las importaciones nativas ES (ECMA Script) del navegador para habilitar el soporte a navegadores modernos sin la necesidad de un proceso de compilación ("build process").

Vite consta de dos partes principales:

• El servidor de desarrollo brinda soporte para la "sustitución de módulos en tiempo de ejecución" o bien, "Remplazo de Módulos en Caliente" (HMR - Hot Module Replacement, por sus siglas en inglés). De esta forma, cómo su nombre lo dice, actualiza los módulos de la aplicación en tiempo de ejecución. Así, que cuando se realizan cambios en el código, sólo se actualiza la parte editada, evitando recargar la aplicación completa, lo que ayuda a acortar el tiempo de desarrollo.
• El comando "build" permite a los desarrolladores empaquetar su código con Rollup, que se encuentra pre-configurado para generar recursos estáticos (static assets) altamente optimizados para producción.

Cómo funciona Vite.js

Cuando se introdujeron los módulos ES en la versión ES6/ES2015, los navegadores no contaban con soporte para los módulos ES6 o bien, era el soporte era muy pobre. En la actualidad, los navegadores modernos ya brindan este soporte, lo que permite a los desarrolladores usar las declaraciones import y export de forma nativa.

En ES nativo, sin embargo, el import debe usar ya sea un URL relativo o absoluto ya que no es posible realizar "importaciones simples" (bare imports) de la forma:

import { algunMetodo } from 'mi-dependencia'

El código anterior lanzará un error en el navegador pues no todos los navegadores tienen soporte para los módulos ES6, y usando ES6 sería necesario utilizar un "import map". Así que la cuestión ahora es, ¿cómo ayuda Vite con esto?

Vite detecta automáticamente las "importaciones simples" (bare imports) en tus archivos fuente y lleva a cabo las siguientes dos acciones:

• Vite pre-empaqueta los archivos fuente para acelerar la carga de la página y convierte los módulos CommonJS o UMD a módulos ESM.
• Para permitirle a los navegadores importar módulos sin lanzar errores, Vite reescribirá las importaciones cómo URLs válidos como se muestra a continuación:

/node_modules/.vite/my-dep.js?v=f3sf2ebb

¿Por qué usar Vite?

Ahora que conocemos lo que es Vite y cómo funciona, te preguntarás por qué deberías usar Vite.

Hay varias razones por las cuales deberías usarlo en tus proyectos, veamos brevemente algunas de ellas.

Desempeño

Pre-empaquetar con ESbuild de Vite es de 10 a 100 veces más rápido que otros empaquetadores JS (bundlers). Esto se debe a que al convertir los módulos CommonsJS o UMD a módulos ESM ayuda a mejorar la velocidad de carga.

De acuerdo con la documentación de Vite,

"El paso de pre-empaquetado, se realiza con esbuild y hace que el tiempo de arranque en frío de Vite sea significativamente más rápido que cualquier empaquetador basado en JavaScript."

Hot Module Replacement (HMR)

Sustitución de Módulos en Tiempo de Ejecución.

Vite utiliza funcionalidades HMR para monitorear los cambios en tu aplicación, sin tener la necesidad de recargar la página completa. Con la API HMR, el navegador sólo cargará la sección modificada de la página y conservará el resto del estado de la aplicación.

No hay necesidad de configurar manualmente la API HMR en tu aplicación ya que es agregada a tu proyecto durante la instalación, si lo creaste mediante el uso de create-vite.

Con el desempeño HMR puedes diseñar aplicaciones más rápidas y ligeras sin importar el número de módulos o el tamaño de tu aplicación.

Opciones de configuración

Vite permite que tengas más control de la configuración de tu proyecto al ampliar la configuración por defecto con vite.config.js o vite.config.ts. Estos archivos se encuentran en el directorio raíz de tu proyecto.

También puedes especificar distintos archivos de configuración con la opción CLI --config como se muestra abajo:

vite --config my-config.js

Lo que necesitarás

Este es el software que debes tener instalado en tu computadora para poder crear un proyecto Vite:

• Node.js versión 12.2.0 o superior (para ver la versión que tienes instalada en tu computadora ejecuta node -v en la terminal).
• Npm / Yarn

Una vez que tengas estos programas instalados en tu computadora, podrás crear proyectos con Vite.

Cómo crear un proyecto con Vite

Para crear una aplicación con Vite abre tu terminal o línea de comandos y navega hacia el directorio donde quieres guardar tu aplicación con Vite. Luego ejecuta el siguiente comando:

npm create @vitejs/app my-vite-app

O para versiones más recientes de Node:

npm create vite@latest my-vite-app

Note: my_vite_app es el nombre de la aplicación con Vite que vamos a crear, pero puedes cambiarlo al nombre que tú prefieras.

Luego de ejecutar el comando de arriba, se te pedirá que selecciones un framework y una plantilla (template o variant). Para los propósitos de este tutorial, vamos a usar React, pero puedes elegir cualquier framework o variante con la que te sientas más familiarizado.

A continuación, ejecuta los siguientes comandos para finalizar la instalación:

cd vite_application
npm install

La instalación puede tomar varios minutos, tendrás que esperar hasta que se haya completado.

Cómo ejecutar una aplicación con Vite

Para ejecutar una aplicación con Vite en la terminal, navega al directorio de la aplicación que hemos creado cd vite-aplication y luego ejecuta el comando dev para ejecutar el servidor de desarrollo:

npm run dev

Ahora abre tu navegador e ingresa a http://localhost:3000. Deberías ver algo como lo que muestra la siguiente captura:

Estructura de directorios en proyectos con Vite

Veamos cómo es que están organizados los directorios en una aplicación con Vite. También daremos un vistazo en detalle a algunos de los directorios y archivos.

Nota: Si elijes usar un framework y/o plantilla distinto, el nombre de los archivos no será el mismo.

El directorio node_modules

El directorio node_modules contiene todas las dependencias necesarias para la aplicación, que se encuentran especificadas en el archivo package.json.

Todas las dependencias configuradas en package.json serán descargadas al directorio node_modules una vez que hayamos ejecutado el comando npm install.

Al "empujar" (del inglés push) nuestro código fuente a GitHub no es necesario incluir el directorio node_modules ya que otros usuarios del código fuente pueden descargar las dependencias necesarias de la misma forma, es decir, gracias al archivo package.json y npm.

Puedes encontrar el archivo package.json en el directorio raíz de tu proyecto.

El directorio src

El directorio src es uno de los directorios con los que más vamos a interactuar al desarrollar aplicaciones con Vite. Este directorio contiene los archivos app.jsx, main.jsx, app.css e index.js.

Todos los recursos de tu aplicación como imágenes, videos y otros archivos deben estar dentro del directorio src ya que Vite lo considera como el directorio base para las URLs en index.html.  

Los archivos App.jsx y main.jsx

El archivo App.jsx es el componente base o raíz que hace la función de contenedor de todos los otros componentes utilizados en la aplicación.

El archivo main.jsx apunta al elemento con id="root" que se encuentra en el archivo index.html y en el cual se renderizan todos los componentes de la aplicación.

index.css y app.css

Estos archivos contienen todos los estilos CSS que utiliza el programa. Puedes agregar tu propio archivo CSS o editar los estilos de index.css.

Conclusión

Hemos visto qué es Vite, cómo funciona y algunas de sus características. También aprendimos cómo crear aplicaciones usándolo.

Para modo de mejorar nuestro flujo de trabajo como desarrolladores y ser más productivos al crear aplicaciones más ligeras y veloces, es muy recomendable visitar, explorar, leer y familiarizarse con la documentación oficial de Vite.