Configurar Rollup desde cero te permite empaquetar aplicaciones JavaScript modernas con plugins que generan HTML, copian assets y minifican estilos. Esta guía es para desarrolladores que ya probaron Parcel o Webpack y quieren dar el siguiente paso con un bundler flexible y orientado a producción.

¿Qué es Rollup y por qué usarlo como empaquetador?

Rollup es un bundler de JavaScript que destaca por su sintaxis clara y su ecosistema de plugins. La idea aquí es replicar el proyecto que consume la fake API para listar productos, pero sumando capas: un template HTML autogenerado, copia de archivos, manejo de imágenes y estilos minificados hacia la carpeta de distribución.

Lo interesante es que, al venir de Webpack, Esbuild o Parcel, vas a notar que la estructura se repite: un objeto con input, output, plugins y opciones como minify o sourcemap. Cambian los nombres y la sintaxis, pero la lógica es la misma.

¿Qué hace Rollup diferente de otros bundlers? Rollup usa por defecto el formato de módulos ES, lo que produce bundles más limpios y con mejor tree shaking. Su sistema de plugins, parte en el core y parte de la comunidad, te permite extenderlo sin fricción.

¿Cómo inicializar un proyecto con Rollup paso a paso?

El flujo de arranque es directo y se apoya en comandos que ya conoces de otros empaquetadores.

Comandos para crear la estructura base

Desde la terminal, sigue esta secuencia:

1. mkdir rollup para crear la carpeta del proyecto.
2. cd rollup para entrar a ella.
3. git init para inicializar el control de versiones.
4. npm init -y para generar el package.json.
5. npm install rollup -D para instalar Rollup como dependencia de desarrollo.
6. code . para abrir Visual Studio Code.

Con esto ya tienes el esqueleto listo para empezar a definir archivos y configuración.

Estructura de carpetas recomendada

Dentro del proyecto, crea una carpeta source que va a contener los recursos del aplicativo. Adentro suma:

• Una carpeta assets para imágenes.
• Una carpeta styles para los archivos de estilos.
• Un archivo index.js como punto de entrada con la lógica principal.

Esta organización te ayuda a separar responsabilidades antes de pasar al build.

¿Cómo se escribe el archivo rollup.config.js?

En la raíz del proyecto crea rollup.config.js. Este archivo exporta un objeto con la configuración que Rollup va a leer al momento de empaquetar.

Los campos clave que vas a definir son:

• input: la ruta del archivo de entrada, en este caso source/index.js.
• output: un objeto con file apuntando a dist/bundle.js, format en es y sourcemap en true.
• plugins: el arreglo donde vas a sumar los plugins que extienden el comportamiento.

El formato es produce módulos ES estándar, aunque también puedes usar otros como amd o iife según el destino del bundle. Activar el source map con true te facilita depurar el código original incluso después del empaquetado.

¿Qué es un source map en Rollup? Es un archivo que mapea el código empaquetado de regreso al código fuente original. Te permite depurar en el navegador viendo tus archivos tal como los escribiste, no la versión minificada.

¿Qué plugins necesitas instalar para un proyecto completo?

Rollup separa los plugins en dos grupos: los del core del proyecto y los creados por la comunidad. Para esta configuración vas a usar cuatro, dos de cada lado.

Plugins oficiales de Rollup

Estos vienen bajo el namespace @rollup:

• @rollup/plugin-html: genera el archivo HTML de forma dinámica y lo coloca en la carpeta de distribución.
• @rollup/plugin-image: permite trabajar con imágenes dentro del bundle.

Instálalos con npm install @rollup/plugin-html -D y npm install @rollup/plugin-image -D.

Plugins de la comunidad

Estos viven fuera del namespace oficial pero son ampliamente usados:

• rollup-plugin-copy: copia archivos y carpetas hacia el destino final.
• rollup-plugin-css-only: extrae y procesa los estilos CSS.

Puedes instalarlos en una sola línea: npm install rollup-plugin-copy rollup-plugin-css-only -D.

La flag -D es clave porque marca cada paquete como dependencia de desarrollo, no de producción. Esto mantiene tu package.json organizado y evita inflar el build final.

Habilidades, conceptos y datos importantes

A lo largo de la clase aparecen varios elementos técnicos que vale la pena tener claros.

Conceptos centrales del empaquetado

• Bundler [00:18]: herramienta que toma múltiples archivos fuente y los combina en uno o varios bundles listos para producción.
• Input y output [04:35]: las dos puntas del proceso. Input define qué archivo leer, output define dónde y cómo escribir el resultado.
• Formato ES [05:10]: estándar de módulos JavaScript moderno, ideal para navegadores actuales y tree shaking eficiente.
• Source map [05:35]: archivo de depuración que conecta el código empaquetado con el código original.

Comandos y flags relevantes

• npm init -y [02:25]: inicializa el package.json aceptando todos los valores por defecto.
• -D o --save-dev [02:40]: marca el paquete como dependencia de desarrollo.
• code . [02:55]: abre Visual Studio Code en el directorio actual.

Plugins instalados

• @rollup/plugin-html [06:30]: genera HTML dinámico.
• @rollup/plugin-image [06:55]: maneja imágenes.
• rollup-plugin-copy [07:15]: copia assets.
• rollup-plugin-css-only [07:25]: procesa CSS.

Con la base lista y los plugins instalados, el siguiente paso es escribir la lógica del index.js y conectar cada plugin dentro de la configuración para sacarle provecho real al bundler. ¿Ya probaste Rollup en alguno de tus proyectos? Cuéntame en los comentarios qué plugin te resultó más útil.