Configura Rollup con plugins desde cero

Curso de Introducción a Empaquetadores Web

Contenido del curso

No sé dónde empezar

Introduccion

Webpack

Parcel

ESBuild

Rollup

Vite

22
Cómo crear tu primer proyecto con Vite
10:02 min

Conclusiones

23
Empaquetadores JavaScript: Ventajas y Desventajas
04:49 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:13

Configura Rollup con plugins desde cero

Curso de Introducción a Empaquetadores Web

Clase 18 de 23

Clase 18 / 23

Recursos

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:

mkdir rollup para crear la carpeta del proyecto.
cd rollup para entrar a ella.
git init para inicializar el control de versiones.
npm init -y para generar el package.json.
npm install rollup -D para instalar Rollup como dependencia de desarrollo.
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.

Introduccion

Empaquetadores Web: Herramientas y Evolución para Desarrolladores

Qué es un empaquetador de módulos JS

Webpack, Parcel, Rollup y Vite comparados

Qué hacen los empaquetadores de módulos en JS

Webpack

Configura tu primer proyecto con Webpack

webpack.config.js con plugins esenciales

Creación de una Landing Page con JavaScript y Tailwind CSS

Manipulación del DOM con map y template literals

Despliegue en GitHub Pages con Webpack

Parcel

Cómo crear un proyecto con Parcel desde cero

Estructura base de un proyecto con Fake Store API

Lógica de API con Vanilla JS y Parcel

Configuración y Uso de Parcel para Proyectos Web

ESBuild

Configurar Svelte con React y TypeScript

Estructura de un proyecto React con TypeScript

useState y useCallback en un contador React

Servidor local con esbuild desde cero

Rollup

Configura Rollup con plugins desde cero

Configurar plugins de Rollup para producción

Manipulación del DOM sin frameworks con Rollup

Servidor local en Rollup con Web Dev Server

Vite

Cómo crear tu primer proyecto con Vite

Conclusiones

Empaquetadores JavaScript: Ventajas y Desventajas

Configura Rollup con plugins desde cero