Antiguamente, cuando teníamos que crear un nuevo sitio web, debíamos crear manualmente una carpeta para el proyecto, las diferentes subcarpetas de las secciones de la web (imágenes, css, js, etc...), configurar un servidor web (se solía usar XAMPP o similares), colocar y enlazar las diferentes librerías CSS y/o Javascript que queríamos utilizar, etc...
Con la evolución del desarrollo web, hemos pasado a crear webs que transpilan código. Esto es, tenemos una carpeta
src/donde tenemos nuestro código fuente y ese código debe preprocesarse y traducirse a otro código (en la carpetadist/) que es el que finalmente leerá nuestro navegador. Mantener actualizado el código fuente que escribimos con el que lee el navegador sin automatizarlo, es una tarea muy tediosa. De ahí surgen los automatizadores.
Actualmente, en el ecosistema Javascript (o en el mundo del desarrollo web en general), es muy común utilizar estos automatizadores para, entre otras cosas, agilizar el proceso de creación de una aplicación web con unos pocos comandos, realizando de forma automática todas esas tareas tediosas y repetitivas, alcanzando nuestro objetivo de forma más rápida y con una mejor experiencia de desarrollador.
Algunas de esas tareas podrían ser las siguientes:
- Creación del proyecto y su gestión (gestionado con NPM)
- Actualización y mantenimiento de dependencias (gestionado con NPM)
- Servidor web local de desarrollo
- Minificación de código
- Optimización de imágenes
- Preprocesar o transpilar código fuente
- Despliegue o subida del código final al servidor
Automatizadores populares
Existen multitud de automatizadores hoy en día, algunos con una filosofía más de automatización de tareas (como Gulp o Grunt) y otros con una filosofía más guiada (pero personalizable) como Webpack o Rollup. Probablemente, estos sean los más relevantes:
| Año | Automatizador | Descripción | GitHub |
|---|---|---|---|
| 2012 | Browserify | Automatizador centrado en traducir require() (Node) al navegador. | GitHub |
| 2013 | Gulp | Automatizador Javascript de tareas basado en pipes y flujos. | GitHub |
| 2014 | Webpack | Bundler enfocado en controlar todo y empaquetar aplicaciones JS. | GitHub |
| 2015 | Rollup | Bundler empaquetador de aplicaciones con buen soporte ESM. | GitHub |
| 2016 | Grunt | Automatizador enfocado en gestión de tareas. | GitHub |
| 2017 | Parcel | Bundler de aplicaciones web enfocado en sencillez de uso. | GitHub |
| 2019 | Snowpack | Automatizador enfocado en técnicas modernas con buen soporte ESM. | GitHub |
| 2020 | Esbuild | Bundler Javascript ultra rápido, centrado en el rendimiento. | GitHub |
| 2021 | Vite | Automatizador de aplicaciones web basado en Rollup y centrado en ESM. | GitHub |
| 2021 | Turbopack | Automatizador basado en Rust de Vercel (Sólo para Next). | GitHub |
| 2022 | RSPack | Automatizador basado en Rust creado por ByteDance (TikTok). | GitHub |
Existen muchos otros automatizadores que no están en esta lista, quizás menos populares en fama, pero que pueden tener su caso de uso particular y adecuado, como por ejemplo FuseBox, Brunch, WMR, microbundle, SWC, PAX, Bundl, etc.
En Bundlers tooling report tienes una comparativa técnica detallada donde se comparan los detalles específicos de automatizadores como Browserify, Parcel, Rollup o Webpack.
