Vite

La etapa de Build también mejora con Vite, gracias a su base de configuración predeterminada, que se adapta de manera excelente a las aplicaciones modernas.

Por debajo usa Rollup (no usa esbuild para crear los bundles) que es un poco más lento pero no impacta en el día a día del desarrollo, ya que los builds son mucho menos frecuentes. Lo bueno es que se beneficia de una herramienta madura.

Una de las cosas que más resultan atrayentes del build de Vite es que produce de manera automática el code-splitting, es decir, parte los bundles de manera que no tengan tanto peso y se puedan descargar por separado, dependiendo de la sección de la aplicación en la que se haya entrado.

Por ejemplo, si estás desarrollando una SPA y entras en la home, gracias al code-splitting descargarás solamente los componentes de esta sección (y los comunes a toda la app) y no cada uno de los cientos de componentes de todo el proyecto. Esto lo hace simplemente interpretando todos los imports dinámicos que encuentra en el código, creando un bundle para cada import dinámico.

Por supuesto, también es capaz de compilar lenguajes como TypeScript, Sass, realizar transformaciones PostCSS, etc.

Vite viene con unos comandos npm que permiten crear fácilmente la estructura de un proyecto frontend, con las carpetas y scripts necesarios para realizar el desarrollo y la producción de los bundles.

Para crear un nuevo proyecto con Vite en cualquiera de los stack de tecnologías más populares lanzamos el siguiente comando:

npm create vite@latest

Algunos de los templates para el scaffolding de proyectos que podremos encontrar disponibles incluyen Javascript Vanilla, React, Preact, Vue, Lit, Svelte... y tienes versiones con y sin TypeScript integrado de entrada.

Además, de manera "no oficial" encuentras muchos otros andamiajes de proyectos que incluyen frameworks y librerías menos conocidos o personalizaciones de estos templates que incluyen mejoras de diversa utilidad.

Una vez que tenemos el proyecto creado, podemos encontrar en el package.json algunos scripts para realizar las tareas comunes:

Arrancar el servidor de desarrollo de un proyecto creado con Vite

Para levantar el servidor de desarrollo de un proyecto Vite lanzamos el siguiente comando desde la raíz del proyecto:

npm run dev

Llevar a producción

Para compilar el código y llevar a producción el proyecto lanzamos el siguiente comando npm:

npm run build

A partir de estos dos comandos tienes cubiertas las necesidades normales de los proyectos de aplicaciones Javascript. Vite se encargará de hacer su trabajo de una manera sencilla y versátil, y sin mayores necesidades de configuración.

Vite tiene un soporte integrado a muchas de las necesidades para el desarrollo frontend ligado a las CSS. Por ejemplo tiene soporte completo a PostCSS, por lo que si quieres hacer cualquier transformación en las CSS simplemente tienes que configurar el plugin adecuado, sin necesitar instalar PostCSS.

Para ello necesitas hacer el import del CSS que quieras que sea procesado desde tu código Javascript.

import './style.css'

Aunque en teoría desde Javascript no sería posible importar código CSS tal cual, gracias a Vite ese código CSS será procesado y extraído del código Javascript. Lo colocará a su vez en un archivo CSS en el proyecto final, una vez hagas el build, y en la etapa de desarrollo por agilidad lo inyectará directamente en el HTML.

Además, vite hará el minimizado del CSS de manera predeterminada, para reducir el peso del código resultante de su compilación.

Imports CSS

Vite tiene ya configurada de casa, sin necesidad de que hagas nada en especial el sistema de agrupación o bundelizado de todo el código CSS que se haya importado desde otros archivos CSS, de modo que, cuando se hace el build se enlaza un único archivo CSS.

Gracias a los imports podemos escribir el código CSS en archivos separados, de modo que es mucho más sencillo el mantenimiento. Gracias al empaquetado y compactado, se obtendrá una mejor optimización, porque solamente será necesaria una solicitud al servidor para obtener el CSS y encima pesará menos.

La manera de importar el CSS es igual que se hace en el estándar del lenguaje:

@import './css/info-box.css';

Otros plugins de PostCSS

Además podemos agregar cualquier plugin de PostCSS para realizar transformaciones en el código. Para ello necesitamos crear el archivo postcss.config.js y realizar toda la configuración, igual que se hace habitualmente en PostCSS.

Sin embargo con Vite tenemos que tener cuidado con una cosa:

• El archivo postcss.config.js entiende que estásvas a usar los imports para "ES Modules", del estándar de Javascript.
• Si quieres usar los módulos de CommonJS necesitarías nombrar el archivo como postcss.config.cjs

Soporte para preprocesadores

Vite también tiene de casa soporte para preprocesadores, como Sass, Stylus...

Solamente necesitas realizar la instalación del paquete de npm necesario para realizar el preprocesamiento del CSS. Por ejemplo, si piensas trabajar con Sass tendrías que realizar la instalación de este paquete:

npm add -D sass

Por supuesto, para que Vite se entere que tiene que realizar el preprocesamiento del CSS con Sass necesitarías que el archivo raíz de tu código CSS tenga extensión ".scss".

import './style.scss'

Para instalar Tailwind en un proyecto con Vite tenemos que instalar PostCSS en el proyecto y el plugin de PostCSS para Tailwind.

npm i -D tailwindcss autoprefixer postcss

Luego creamos el archivo postcss.config.cjs y el archivo tailwind.config.cjs en la raíz del proyecto. Lo podemos hacer a mano, tal como se haría para configurar Tailwind en un proyecto normal, o con el siguiente comando de consola:

npx tailwindcss init -p

Ahora necesitamos colocar las directivas de Tailwind en el archivo CSS de tu proyecto.

@tailwind base;
@tailwind components;
@tailwind utilities;

Posteriormente podemos indicar qué archivos se van a procesar mediante Tailwind CSS para localizar las clases de utilidad que se deben incluir en el proyecto. Esto lo haces en el archivo tailwind.config.cjs, mediante la configuración content.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

En el array content puedes indicar más rutas, indicando los archivos sueltos o bien los patrones de rutas donde debe buscar las clases de utilidad:

content: [
    "./index.html",
    "./src/**/*.{js,ts,html,hbs}",
],