Configurar plugins de Rollup para producción

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:006:01

Configurar plugins de Rollup para producción

Curso de Introducción a Empaquetadores Web

Clase 19 de 23

Clase 19 / 23

Recursos

Configurar plugins en Rollup es lo que te permite transformar un empaquetador básico en una herramienta lista para producción. Aquí vas a ver cómo integrar cuatro plugins clave dentro de rollup.config.js para copiar archivos, manejar estilos, generar HTML dinámico y optimizar imágenes en tu proyecto.

¿Para qué sirven los plugins en Rollup?

Los plugins en Rollup definen flujos específicos dentro del proceso de empaquetado. Cada uno cumple una función puntual y tú decides cuáles agregar según las necesidades reales de tu proyecto.

En esta configuración vas a trabajar con cuatro plugins concretos:

rollup-plugin-copy para mover recursos desde source hasta dist.
rollup-plugin-css-only para procesar y entregar los estilos como un bundle.
@rollup/plugin-html para generar el archivo HTML dinámico con referencias a scripts y estilos.
@rollup/plugin-image para preparar y optimizar imágenes importadas.

¿Qué hace un plugin en un bundler? Ejecuta una tarea específica durante el proceso de build, como copiar archivos, transformar código o generar nuevos recursos en la carpeta de salida.

¿Cómo evaluar si un plugin es confiable?

Antes de instalar cualquier dependencia, revisa de dónde viene y quién la mantiene. Si una herramienta lleva más de seis meses sin actualizarse, probablemente perdió soporte activo y vas a heredar problemas.

Los recursos sanos muestran commits recientes, issues en discusión y mejoras que se reflejan semana a semana. Esa actividad constante es la señal de que la comunidad sigue detrás del proyecto.

¿Cómo importar los plugins en rollup.config.js?

Antes de declarar la sección plugins, necesitas traer cada paquete con su respectivo import. La sintaxis sigue el patrón estándar de módulos:

javascript import html from '@rollup/plugin-html'; import copy from 'rollup-plugin-copy'; import css from 'rollup-plugin-css-only'; import image from '@rollup/plugin-image';

Cada referencia apunta al plugin que instalaste previamente. html se encarga del template dinámico, copy mueve archivos entre carpetas, css arma el bundle de estilos e image procesa las imágenes que importes desde tu código.

¿Cómo configurar cada plugin dentro del array de plugins?

La propiedad plugins recibe un array, y dentro vas llamando cada función con su objeto de configuración cuando lo necesites.

¿Cómo copiar archivos con rollup-plugin-copy?

El plugin copy recibe un objeto con la propiedad targets, que a su vez es un array. Cada target define un src (origen) y un dest (destino).

javascript copy({ targets: [ { src: 'source/assets/**/*', dest: 'dist/assets' } ] })

La expresión source/assets/**/* le indica que copie todas las subcarpetas y archivos contenidos dentro de assets, sin importar la profundidad. Así mantienes tu carpeta source ordenada durante el desarrollo y dejas que el build arme la estructura final en dist.

¿Cómo configurar estilos y HTML?

Para los estilos, el plugin css necesita saber cómo se llamará el archivo de salida. Le pasas la propiedad output con el nombre del bundle:

javascript css({ output: 'bundle.css' })

El plugin html se usa sin configuración adicional. Por defecto detecta dónde están los scripts y los estilos generados, y arma el archivo HTML con las referencias correctas.

javascript html()

¿Por qué algunos plugins no requieren configuración? Porque ya traen valores por defecto pensados para los casos más comunes. Solo le pasas un objeto cuando necesitas modificar ese comportamiento estándar.

¿Cómo agregar optimización de imágenes?

El plugin image también funciona sin parámetros. Su rol es permitir que importes imágenes directamente en tu código JavaScript y prepararlas para que Rollup las procese dentro del build.

javascript image()

¿Cómo queda el array final de plugins?

Reuniendo todo, la sección plugins de tu rollup.config.js luce así:

javascript plugins: [ copy({ targets: [ { src: 'source/assets/**/*', dest: 'dist/assets' } ] }), css({ output: 'bundle.css' }), html(), image() ]

Con esta estructura, Rollup ya sabe qué hacer con tus archivos estáticos, tus hojas de estilo, tu HTML y tus imágenes. El siguiente paso es escribir la lógica dentro de index.js y compilar el proyecto para verlo funcionando.

¿Qué plugin de Rollup te ha resultado más útil en tus proyectos? Cuéntame en los comentarios cuál agregarías a esta configuración base.

import html from '@rollup/plugin-html';
import copy from 'rollup-plugin-copy';
import css from 'rollup-plugin-css-only';
import image from '@rollup/plugin-image';

export default {
    input: "src/index.js",
    output: {
        file: 'dist/bundle.js',
        format: 'es',
        sourcemap: true,
    },
    plugins: [
        copy({
            targets: [
                {
                    src: "src/assets/**/*",
                    dest: "dist/assets"
                }
            ]
        }),
        css({
            output: 'bundle.css'
        }),
        html(),
        image(),
    ]
}

Resumen

¿Para qué sirven los plugins en Rollup?

Los plugins en Rollup definen flujos específicos dentro del proceso de empaquetado. Cada uno cumple una función puntual y tú decides cuáles agregar según las necesidades reales de tu proyecto.

En esta configuración vas a trabajar con cuatro plugins concretos:

rollup-plugin-copy para mover recursos desde source hasta dist.
rollup-plugin-css-only para procesar y entregar los estilos como un bundle.
@rollup/plugin-html para generar el archivo HTML dinámico con referencias a scripts y estilos.
@rollup/plugin-image para preparar y optimizar imágenes importadas.

¿Qué hace un plugin en un bundler? Ejecuta una tarea específica durante el proceso de build, como copiar archivos, transformar código o generar nuevos recursos en la carpeta de salida.

¿Cómo evaluar si un plugin es confiable?

Los recursos sanos muestran commits recientes, issues en discusión y mejoras que se reflejan semana a semana. Esa actividad constante es la señal de que la comunidad sigue detrás del proyecto.

¿Cómo importar los plugins en rollup.config.js?

Antes de declarar la sección plugins, necesitas traer cada paquete con su respectivo import. La sintaxis sigue el patrón estándar de módulos:

javascript import html from '@rollup/plugin-html'; import copy from 'rollup-plugin-copy'; import css from 'rollup-plugin-css-only'; import image from '@rollup/plugin-image';

¿Cómo configurar cada plugin dentro del array de plugins?

La propiedad plugins recibe un array, y dentro vas llamando cada función con su objeto de configuración cuando lo necesites.

¿Cómo copiar archivos con rollup-plugin-copy?

El plugin copy recibe un objeto con la propiedad targets, que a su vez es un array. Cada target define un src (origen) y un dest (destino).

javascript copy({ targets: [ { src: 'source/assets/**/*', dest: 'dist/assets' } ] })

¿Cómo configurar estilos y HTML?

Para los estilos, el plugin css necesita saber cómo se llamará el archivo de salida. Le pasas la propiedad output con el nombre del bundle:

javascript css({ output: 'bundle.css' })

El plugin html se usa sin configuración adicional. Por defecto detecta dónde están los scripts y los estilos generados, y arma el archivo HTML con las referencias correctas.

javascript html()

¿Por qué algunos plugins no requieren configuración? Porque ya traen valores por defecto pensados para los casos más comunes. Solo le pasas un objeto cuando necesitas modificar ese comportamiento estándar.

¿Cómo agregar optimización de imágenes?

El plugin image también funciona sin parámetros. Su rol es permitir que importes imágenes directamente en tu código JavaScript y prepararlas para que Rollup las procese dentro del build.

javascript image()

¿Cómo queda el array final de plugins?

Reuniendo todo, la sección plugins de tu rollup.config.js luce así:

javascript plugins: [ copy({ targets: [ { src: 'source/assets/**/*', dest: 'dist/assets' } ] }), css({ output: 'bundle.css' }), html(), image() ]

¿Qué plugin de Rollup te ha resultado más útil en tus proyectos? Cuéntame en los comentarios cuál agregarías a esta configuración base.

Comentarios (5)5 comentarios

Rubén Ernesto Aragón Gil

Hace 4 años

Kenneth Angulo L

Hace 2 meses

¿Cuándo debería usar el plugin de copia?

Deberías implementarlo cuando necesites trasladar recursos estáticos que no requieren ser procesados por el empaquetador de JavaScript. Piensa en el plugin copy como un servicio de mudanza automatizado para tu proyecto. Por ejemplo, si tienes una carpeta con fuentes tipográficas, iconos SVG crudos o archivos de traducción en tu directorio src/assets, estos elementos deben llegar intactos a tu carpeta final de distribución. Al configurar este plugin, le indicas a Rollup exactamente qué rutas observar y a dónde moverlas durante el proceso de construcción. Esto mantiene tu código fuente organizado y asegura que tu aplicación en producción tenga acceso a todos los recursos visuales y estructurales necesarios sin intervención manual.

Jorge Arias Argüelles

Hace un año

Para crear un entorno de desarrollo local en Rollup, necesitas instalar el paquete rollup-plugin-serve. Este plugin permite servir tus archivos de manera local y refrescar automáticamente el navegador al detectar cambios en tu código.

Es fundamental asegurarte de que Rollup esté correctamente configurado en tu archivo rollup.config.js, incluyendo los plugins necesarios para el desarrollo. No olvides revisar la documentación de Rollup y de los plugins para obtener más detalles sobre las configuraciones específicas.

¿Qué pasa si HTML no recibe configuración?

El plugin actuará de forma inteligente utilizando sus valores por defecto para generar un archivo index.html funcional desde cero. Es como tener un asistente que sabe exactamente dónde colocar los cimientos de un edificio sin que le des los planos detallados. Al no pasarle un objeto de configuración, el plugin inspeccionará automáticamente tu flujo de trabajo, identificará dónde se están generando tus archivos empaquetados de JavaScript (.js) y tus hojas de estilo extraídas (.css), y los inyectará dinámicamente mediante etiquetas <script> y <link> en el documento HTML resultante. Esto es ideal para proyectos rápidos o Single Page Applications (SPA) donde no necesitas una plantilla base altamente personalizada, ahorrándote mucho tiempo.

Guillermo Prituluk

Hace 2 años

Lo veo complicado a rollup, menos mal que pusieron de ultimo a vite para relajar un poco jajaja

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

Configurar plugins de Rollup para producción