La compilación de módulos JavaScript se ha convertido en una tarea crítica para los desarrolladores de aplicaciones modernas. Entre las herramientas disponibles, Rollup JS destaca por su eficiencia en la creación de paquetes de código que aprovechan el formato de módulo ES6. En este artículo, vamos a detallar cómo puedes utilizar Rollup JS para llevar tus proyectos al próximo nivel.
¿Qué es Rollup JS?
Rollup JS es un empaquetador de módulos JavaScript que permite transformar trozos de código escritos en múltiples archivos en un único archivo o paquete. Lo que distingue a Rollup de otros empaquetadores como Webpack es su enfoque en los módulos ES6, lo que posibilita construir paquetes más pequeños y eficientes aprovechando el sistema de importación y exportación nativo de JavaScript.
Configuración Inicial de Rollup JS
Para empezar, necesitas instalar Rollup en tu proyecto. Esto se puede hacer fácilmente a través de npm con el siguiente comando:
npm install rollup --save-devUna vez instalado Rollup, tienes que crear un archivo de configuración llamado rollup.config.js en la raíz de tu proyecto. Este archivo ayudará a Rollup a entender cómo procesar tu aplicación.
El archivo de configuración básico puede verse así:
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
export default {
input: 'src/main.js', // el punto de entrada de tu aplicación
output: {
file: 'dist/bundle.js', // el archivo resultante
format: 'iife', // el formato del paquete (iife, cjs, esm, etc.)
},
plugins: [
resolve(), // ayuda a Rollup a comprender los módulos node
commonjs() // convierte módulos CommonJS en ES6
]
};Instalación de Plugins Necesarios
Rollup posee una amplia gama de plugins que le permiten manejar varios tipos de archivos y aplicar transformaciones durante la construcción del paquete. Dos plugins esenciales son @rollup/plugin-node-resolve y @rollup/plugin-commonjs, que permite trabajar con módulos de Node.js y CommonJS respectivamente. Instálalos con:
npm install @rollup/plugin-node-resolve @rollup/plugin-commonjs --save-devIntegración con Babel
Para asegurarte de que tu código sea compatible con todos los navegadores, puedes integrar Babel con Rollup. Para esto, necesitas el plugin @rollup/plugin-babel. Primero, instálalo:
npm install @rollup/plugin-babel @babel/core @babel/preset-env --save-devDespués, actualiza tu rollup.config.js para incluir Babel:
import babel from '@rollup/plugin-babel';
export default {
// ...resto de la configuración
plugins: [
// ...otros plugins
babel({
exclude: 'node_modules/**', // solo transpilar nuestro código
presets: ['@babel/preset-env']
})
]
};Creación de un Bundle con Rollup
Tomando el rollup.config.js listo, para crear tu paquete simplemente debes ejecutar el comando de Rollup en tu terminal:
npx rollup -cEsto generará un archivo bundle.js en la carpeta dist con tu código compilado y listo para ser incluido en un proyecto web.
Optimización del Código
Para optimizar aún más tu código y mejorar la carga de tu sitio, puedes usar el plugin rollup-plugin-terser, que minimiza y ofusca el código resultante. Instálalo con:
npm install rollup-plugin-terser --save-devAñádelo a tu configuración de Rollup:
import { terser } from 'rollup-plugin-terser';
export default {
// ...resto de la configuración
plugins: [
// ...otros plugins
terser()
]
};Ahora cada vez que construyas el paquete, obtendrás una versión minimizada de tu código.
Uso en Proyectos de Escala Real
En un escenario de desarrollo real, posiblemente necesites dividir tu aplicación en varios paquetes para diferenciar código de bibliotecas de terceros y tu lógica de negocio principal. Rollup ofrece la opción de crear múltiples puntos de salida para facilitar esta tarea.
Conclusión
Configurar y utilizar Rollup JS en tus proyectos de desarrollo JavaScript te permitirá mantener un código organizado, eficiente y optimizado para producción. Su capacidad para trabajar con módulos ES6 nativos y su ecosistema de plugins lo hacen una herramienta poderosa y adaptable.
Para cualquier duda o consulta sobre Rollup JS y otras herramientas de desarrollo, no dudes en visitar NelkoDev donde encontrarás recursos y guías adicionales o contactarme directamente en NelkoDev Contacto. ¡Manos a la obra y a construir proyectos increíbles con Rollup JS!
Spanish 
English