Preparar un entorno de desarrollo frontend con Vite

Mejora tu experiencia de desarrollo y productividad tras preparar un entorno de desarrollo frontend único con Vite.

Si eres un usuario recurrente de esta web, ya habrás identificado que muchos de los artículos que escribo van acompañados de ejercicios prácticos.

Sin embargo, hasta este momento, aún no me había detenido a explicar una parte fundamental que está presente en la mayoría de estos.

Me refiero en concreto, al «bundler» y al resto de funcionalidades que configuran su entorno de desarrollo frontend

A grandes rasgos, un web “bundler” es una herramienta diseñada para empaquetar un conjunto de recursos y prepararlos para su optimización y publicación en el servidor. 

Creando un árbol de dependencias aprovechando los módulos ES

Por lo general, los “bundlers” aprovechan el sistema de módulos ES para recorrer el árbol de dependencias, y así crear el paquete final compuesto por unos pocos archivos HTML, CSS y JS.

Esquema de importación bundler web
Esquema de importación bundler web

Además del “bundler”, al entorno se le suelen sumar otros componentes que mejoran enormemente la experiencia de desarrollo. Algunas de estas funcionalidades son:

  • Un servidor local para alojar y cargar la aplicación web durante su desarrollo.
  • Un sistema de «hotreloading» que se encargue de actualizar el navegador cada vez que detecta un cambio en el código fuente.
  • Transpiladores, para convertir y compilar el código de un lenguaje determinado a otro que el navegador pueda interpretar (p.ej de Typescript a JavaScript).
  • Un “minificador” para comprimir y reducir el tamaño final de los archivos.

Si has trabajado con entornos pre-configurados como “create-react-app” de React o “vue create” de Vue, seguro que ya estarás familiarizado con estas características.

Estos “packages” integran las funciones antes mencionadas con frameworks de desarrollo JavaScript.

Pero, ¿qué pasa si no deseamos utilizar ningún framework JS? o si sencillamente queremos preparar un entorno de cero, customizado con solo aquello que necesitamos.

Pues precisamente hoy veremos cómo preparar un entorno de desarrollo con Vite y JavaScript.

Antes de continuar, quiero aclarar que, técnicamente hablando, Vite no es un “bundler” en sí mismo. En realidad Vite utiliza RollUp, para realizar el proceso de “build”, pero para simplificar las cosas, hablaremos de ambos como si fueran sinónimos.

Vite vs Webpack, dos «bundlers» geniales

Al inicio de este post destacaba que la mayoría de proyectos que puedes encontrar en el repositorio, están enmarcados en un entorno de desarrollo creado a medida

No obstante, ese entorno utiliza Webpack como “bundler”. Webpack es una alternativa a Vite perfectamente válida, que personalmente he estado usando durante mucho tiempo. 

Entonces ¿Qué bundler es mejor? Pues, a decir verdad, me resulta difícil decirlo. 

Cuando Vite apareció, buscaba corregir problemas de velocidad durante los procesos de empaquetado y refresco del navegador. Problemas que aparecían sobre todo en proyectos de tamaños considerables, donde el árbol de dependencias era tan grande que cada compilación podía tardar varios minutos.

Ahora bien, a partir de la versión 5 de Webpack, con la incorporación de funciones como “lazy compilation” y “code-splitting”, ese tipo de problemas quedó resuelto. Así que podríamos considerar ambas herramientas (Vite y Webpack) igualmente válidas.

Llegado a este punto, puede que te estés preguntando, Si són prácticamente iguales, ¿porque he decidido escribir sobre Vite?. 

Pues la razón es simple, necesitaba una excusa para aprender un poco más acerca de Vite, y quería compartir las conclusiones a las que he llegado con vosotros.

Mi objetivo es preparar un entorno nuevo, para futuros proyectos de librerías JS. Pero para sentirme satisfecho con el resultado, el entorno Vite debe disponer de las funciones descritas en el anterior listado, y además, cumplir con las siguientes condiciones:

  • El entorno debe admitir Typescript como lenguaje de programación adicional.
  • También debe aceptar SCSS como preprocesador CSS.
  • Debe permitir la carga de imágenes directamente en el archivo JS mediante la declaración “import”.
  • Debe poder generar más de un archivo html, con su script y css independientes.

En esencia, con esta práctica estoy tratando de replicar un entorno parecido al que ya preparé con Webpack. De modo que, al final del día, podrás comparar ambos, y estudiar en detalle sus diferencias.

Por un lado, puedes encontrar la configuración de Webpack en el siguente enlace al repositorio:

https://github.com/Danivalldo/libreriasjs/tree/master/MASTER/bundler

Por el otro, también te dejo el enlace a la preparación del entorno con Vite. Por si quieres tenerlo a mano mientras sigues este tutorial.

https://github.com/Danivalldo/libreriasjs/tree/master/Vite

Preparar un entorno de desarrollo frontend con Vite

Y sin más dilación, vamos a por ello. El primer paso para crear un proyecto nuevo con Vite, es lanzar el comando de instalación mediante NPM.

npm create vite@latest Vite

Como ves, en esta instrucción decidimos el nombre del directorio donde instalar el proyecto, en este caso lo he llamado “Vite”.

Al ejecutarlo, se nos abrirá un prompt en la consola, donde podremos decidir qué template usar.

Vite dispone de un conjunto de plantillas para preparar el proyecto con una configuración básica. Las opciones son las siguientes:

  • vanilla y vanilla-ts: Si no deseamos ningún framework y queremos trabajar solo con JavaScript o TypeScript.
  • vue y vue-ts: Si queremos instalar Vue, con soporte (o no) para TypeScript.
  • react y react-ts: Si queremos trabajar con React, con soporte (o no) para TypeScript.
  • preact y preact-ts: Si necesitamos Preact, con soporte (o no) para TypeScript.
  • lit y lit-ts: Si queremos añadir Lit, con soporte (o no) para TypeScript.
  • svelte y svelte-ts: Si tenemos preferencia por Svelte, con soporte (o no) para TypeScript.

En nuestro caso queremos iniciar un proyecto vanilla con soporte para TypeScript. De modo que elegimos vanilla y vanilla-ts.

Selección del framework en Vite
Selección del framework en Vite

Acto seguido, accedemos al directorio Vite, e instalamos todas las dependencias con la instruccion de NPM

npm install

Tras su instalación introducimos el siguiente comando para corroborar que funciona correctamente.

npm run dev

Si todo ha ido bien, deberíamos tener la opción de visualizar una sencilla landing page a través del navegador.

Servidor local en marcha Vite
Landing page Vite
Landing page Vite

Seguidamente, abrimos el proyecto con un editor de código y analizamos brevemente su contenido. Allí se puede apreciar que el instalador preparó el siguiente conjunto de archivos y directorios.

Un directorio “public”, dónde guardar recursos, como imágenes, que formarán parte del material disponible en el servidor estático.

Por otra parte, el directorio “src” es donde construiremos toda nuestra aplicación web. Eso significa que todos aquellos archivos que definen nuestro programa se deben incluir dentro de esta carpeta. Vite ya ha incluido algunos archivos .ts, una imágen, y una hoja de estilos css allí.

Por cierto, el servidor local que tenemos en marcha, ya tiene implementado el sistema de auto refrescado. Eso significa que podemos editar cualquier archivo dentro de “src” y automáticamente veremos el cambio reflejado en el navegador.

Entre el resto de archivos encontramos el index.html, el cual actúa como template básico. De ese archivo es importante destacar la etiqueta script que contiene al final del “body”.

<script type="module" src="/src/main.ts"></script>

Esta etiqueta le indica a Vite cuál es el archivo .js o .ts dentro del directorio src, que actúa como punto de entrada. De hecho, podemos realizar una compilación ya mismo, y ver que resultado genera.

Para ello lanzamos el siguiente comando

npm run build

En cuestión de microsegundos, Vite habrá creado un nuevo directorio llamado “dist”. En él, encontraremos una versión de los archivos que conforman la aplicación web comprimidos y optimizados para su publicación.

Dicho sea de paso, en este punto ya podemos marcar algunas de las características imprescindibles en nuestro entorno como disponibles.

  • Un servidor local para alojar y cargar la aplicación web durante su desarrollo.
  • Un sistema de «hotreloading» que se encargue de actualizar el navegador cada vez que detecta un cambio en el código fuente.
  • Transpiladores, para convertir y compilar el código de un lenguaje determinado a otro que el navegador pueda interpretar (p.ej de Typescript a JavaScript).
  • Un “minificador” para comprimir y reducir el tamaño final de los archivos.
  • El entorno debe admitir Typescript como lenguaje de programación adicional.
  • Debe permitir la carga de imágenes directamente en el archivo JS mediante la declaración “import”.

No está nada mal, seis de ocho funcionalidades cubiertas solo con instalar la herramienta. Pero aún queda camino por recorrer.

Logrando las últimas funcionalidades del entorno de desarrollo

A continuación intentaremos implementar el preprocesador SCSS. Vamos a realizar la prueba de añadir directamente un archivo “index.scss” dentro del directorio “src”.

body {
  background-color: rgb(187, 0, 212);
}

Seguidamente importamos este archivo al inicio de index.ts

import "./styles.scss";

Tras hacerlo, veremos que el entorno nos lanza un error indicando que no disponemos de la dependencia necesaria.

Error de dependencia sass
Error de dependencia sass

Para corregirlo, detenemos el servidor local con control + C, y después instalamos “sass” mediante la instrucción NPM:

npm install sass

Volvemos a iniciar el servidor y efectivamente ya se aplican los estilos definidos en el archivo SCSS. Otra funcionalidad que podemos tachar de la lista.

  • También debe aceptar SCSS como preprocesador CSS.

Para terminar, vamos a intentar lograr que “index.html” no sea el único archivo HTML que Vite reconozca en el entorno.

Empezamos creando un directorio nuevo en la raíz al que llamaremos “custom-page”. En él incluiremos el siguiente documento html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom page</title>
  </head>
  <body>
    <h1>Custom page!</h1>
    <script type="module" src="/src/custom-page.ts"></script>
  </body>
</html>

Como verás, al final de este documento he incluido una etiqueta script apuntando a un nuevo punto de entrada dentro de src llamado “custom-page.ts”.

La idea detrás de ésta estructura, es que el “builder” genere dos documentos independientes entre sí, cada uno con sus propios scripts y estilos.

Para ello, creamos dos documentos más dentro de src, una hoja de estilos SCSS nueva, y el propio “custom-page.ts” importándola.

body {
  background-color: rgb(255, 226, 34);
}
import "./custom-page-style.scss";
console.log("AWESOME!");

El código de estos archivos es muy simple, sirven sencillamente para comprobar que todo funciona correctamente.

Con estos cambios realizados, podemos navegar a /custom-page/ y verificar que, efectivamente, el servidor carga la nueva página.

Solo hay un pequeño inconveniente, si de nuevo lanzamos el comando “npm run build” descubrimos que Vite ignora este segundo HTML y su árbol de dependencias.

Vamos a corregir esto.

Para definir determinados comportamientos, Vite admite la creación de un archivo de configuración llamado “vite.config.js”.

Lo creamos en la raíz del proyecto, y le añadimos el siguiente código

// vite.config.js
import { resolve } from "path";
import { defineConfig } from "vite";
export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
        customPage: resolve(__dirname, "custom-page/index.html"),
      },
    },
  },
});

A través de estas instrucciones, estamos indicando que en el momento de realizar el proceso de “build”, tenga en cuenta dos puntos de entrada. El principal como “main” y un secundario con el nombre de “custom-page”.

Si ahora re-lanzamos el comando “build” veremos que, en efecto, ya incluye la página adicional.

  • Debería poder generar más de un archivo html, con su script y css independiente.

La verdad es que este documento de configuración permite escalar mucho más las prestaciones de Vite, pero detallar todas las posibilidades, alargaría demasiado este escrito. De modo que, a continuación, dejo un enlace a una documentación más detallada, por si te interesa investigar un poco más.

https://vitejs.dev/config/

Con esto hemos completado este rápido vistazo a cómo preparar un entorno de desarrollo frontend con Vite. Espero que te haya resultado de utilidad.

Ahora, si a demás de preparar el entorno, quieres saber como publicar tu build en una plataforma de deploy como Vercel, no te pierdas este artículo:

Publicar proyectos frontend con Vercel

Recientemente he creado un artículo donde explico cómo preparar un entorno de desarrollo backend con NodeJs y TypeScript. Le puedes echar un vistazo en el siguiente enlace:

Crear un entorno de desarrollo backend con NodeJs y TypeScript

Y si te has quedado con ganas de aprender más herramientas y librerías que mejoran tu experiencia de desarrollo, a continuación te dejo un par de artículos más que pueden ser de tu interés.

Crear apps multiplataforma con JavaScript.

Crear interfaces UI para ajustar parámetros de tus programas.

¡Un abrazo desarrollador! ¡Nos vemos pronto!

Deja un comentario