Cada año es un año excelente para JavaScript, y el 2021 no es la salvedad. Particularmente, una nueva generación de agrupadores y herramientas de construcción está retando la inercia de las herramientas "suficientemente buenas”. Mejor velocidad, una mejor experiencia de desarrollo y mayor calidad en las construcciones de producción son áreas de interés de la nueva generación.

Módulos ECMAScript (ESM)

Los módulos ECMAScript, también conocidos como módulos ES o ESM, son la sintaxis oficial del módulo JavaScript. Como tal, técnicamente no es una herramienta, mas tiene extensas implicaciones para el desarrollo y las herramientas de JS. Hemos visto una gran cantidad de caos e inseguridad en el uso del módulo de JavaScript a lo largo de un tiempo (con Node.js aterrizando en la sintaxis CommonJS). Mas con la reciente aprobación de ESM, y su implementación general en navegadores, se abren nuevas posibilidades para aquellos que dan sus primeros pasos en javascript curso online.

esbuild

esbuild es una entrada parcialmente nueva en el campo del empaquetado. Como otros, su fama se debe a su velocidad. Está escrito en Go, en lugar de JavaScript, y se beneficia del paralelismo integrado de Go. Asimismo se fundamenta en el empleo de memoria compartida inteligente durante el análisis y la generación de código.

Puede tener una idea de la velocidad de esbuild al contrastar los puntos de referencia del proyecto. Los puntos de referencia muestran aumentos de rendimiento 100 veces superiores a los de otros bultos.

De forma predeterminada, esbuild se agrupa para el navegador, mas también es capaz de agruparse para Node.js. Funciona de forma similar a otras herramientas de colección, al vincularse a NPM por medio de package.json y node_modules. También ofrece una API de JavaScript, la que puede utilizar para amontonar comandos de compilación si, para el empleo de la línea de comandos, sus necesidades se vuelven demasiado complejas y difíciles de manejar. El Listado 3 muestra un ejemplo del empleo de esta API.

Esbuild se centra en la agrupación y no incluye un servidor en modo de desarrollo. Algunas peculiaridades, como la separación code/CSS, aún están en proceso. Otras herramientas pueden emplear esbuild para sus capacidades de agrupación de producción; consulte Vite a continuación.

En mayo del 2021, esbuild tiene ~25K estrellas GitHub, y ~570K descargas semanales de NPM. Esto causa que esbuild sea el más pequeño de los proyectos descritos aquí, pero está experimentando un veloz incremento en el empleo y sus promesas de rendimiento lo transforman en una alternativa tentadora.

Parcel

Sería negligente si no mencionara a Parcel, que es una herramienta afín en espíritu a Webpack y Rollup (ver más abajo). Aparte de reducir la sobrecarga de configuración, Parcel afirma progresar el desempeño, aunque no puede igualar las afirmaciones de esbuild a ese respecto.

El bulto incluye división de código sin configuración y reemplazo de módulo caliente (HMR, por sus siglas en inglés) listo para usar. Asimismo incorpora muchos géneros de ficheros (como imágenes) de manera predeterminada y puede manejarlos sin configuración auxiliar.

Parcel tiene en torno a ~38K estrellas en GitHub y ~64K descargas semanales de NPM (las descargas semanales parecen estar nivelándose). Estas estadísticas lo convierten en una opción viable de tamaño mediano.

¿Qué es el reemplazo del módulo caliente?: Frecuentemente abreviado a HMR, el remplazo de módulo caliente es la capacidad de un sistema de tiempo de ejecución de desarrollo para actualizar solo aquellas unas partes de la aplicación que han experimentado un cambio de estado, en vez de regresar a cargar la aplicación completa. HMR permite actualizaciones más rápidas y una experiencia de desarrollo más optimada porque la mayoría del estado de la aplicación se sostiene entre las actualizaciones y se evitan, en gran medida, las recargas completas.

pnpm

pnpm no es un bulto ni una herramienta de compilación. En cambio, es un reemplazo directo de la herramienta de dependencia NPM. Esto hace que sea afín a Yarn en propósito, pero pnpm tiene un enfoque diferente: se emplea enlaces duros para aplanar el árbol de node_modules, lo que simplifica la administración de la dependencia y evita dependencias duplicadas. Puede leer más sobre esta ocurrente ingeniería acá.

Aparte de ahorrar espacio en el disco, esta estructura abre ciertas mejoras de rendimiento, como se ve en estos puntos de referencia, que muestran que pnpm supera a otros administradores de bultos en la mayoría de las tareas.

Pnpm también incluye pnpx, una herramienta similar a npx, para ejecutar bultos.

Pnpm tiene ~11K estrellas de GitHub y ~191K descargas semanales de NPM. Es el administrador de bultos predeterminado para SvelteKit y está experimentando un fuerte desarrollo en el uso. pnpm parece ser un competidor líder para el próximo administrador de dependencias estándar de facto.

Rollup

Rollup es un bulto que le deja emplear la sintaxis de ESM en todas partes. Suaviza las diferentes sintaxis que se ven en uso (CJS, AMD, UMD, EMS, etc.) y reúne su código en una sintaxis que simplemente marcha. Además, Rollup ofrece "agitación de árboles”, que es la capacidad de analizar su base de código y suprimir las importaciones no empleadas. Esto tiene ventajas de rendimiento obvias.

Como esbuild y otros paquetes, Rollup se vincula con package.json y node_modules por medio de NPM.

Al usar Rollup, esencialmente puede olvidarse de la sintaxis del módulo y simplemente usar ESM. Por lo general, Rollup tiene como objetivo brindarle la experiencia del futuro desarrollo de JS, donde todo está unificado en ESM ahora.

En funcionamiento, Rollup es bastante similar a Webpack, mas en contraste a Webpack, tiene soporte para la salida de Node.js. Además, ciertos desarrolladores notifican de una experiencia más fácil y fluida con Rollup.

El paquete acumulativo no soporta la sustitución del módulo caliente inmediatamente.

Rollup tiene una comunidad activa y un ecosistema de complementos completo. En mayo del 2021, tiene ~20K estrellas de GitHub y ~4.8 millones de descargas semanales de NPM.
Vite

Vite era originalmente una herramienta de colección particularmente para Vue, mas ahora es compatible con el empleo general. Se ha convertido en la solución de colección oficial para SvelteKit, con lo que su uso cada vez es más extenso.

Vite se centra en manejar dos requisitos de cara al desarrollo de JS: ejecutar el modo de desarrollo y compendiar para la producción. Vite no es un agrupador y, en cambio, trasfiere las labores de agrupación de producción a Rollup.

Con la pretensión de ser veloz (vite significa veloz en francés), Vite promociona su servidor de desarrollo de comienzo veloz y remplazo de módulo caliente. La experiencia confirma las afirmaciones de Vite -estas funciones funcionan bastante veloz en comparación con algo como Webpack.

Las mejoras de velocidad de Vite se basan en el aprovechamiento de ESM y el uso de esbuild para el embalado anterior. El empleo de ESM quiere decir que Vite puede descargar el trabajo de empaquetar al navegador a lo largo del desarrollo y conseguir una mayor granularidad al determinar qué archivos se sirven a lo largo de los cambios.

En nuestros días, Vite emplea Rollup para las colecciones de producción (para obtener funciones como la división de CSS), mas puede mudar a esbuild en el futuro.

La experiencia de desarrollo de Vite es su punto más fuerte -la sustitución del módulo caliente es muy rápida. En la actualidad tiene ~27K estrellas de GitHub y ~124K descargas semanales de NPM, con un fuerte aumento en las descargas observadas en los últimos meses.

Snowpack

Snowpack es otro bulto y servidor de desarrollo centrado en la velocidad. Cuenta con un inicio rápido del servidor, compatibilidad con ESM con almacenamiento en caché inteligente, remplazo rápido de módulos calientes y compatibilidad con configuraciones bajas de una pluralidad de géneros de ficheros. Snowpack es afín en espíritu a Rollup y Parcel.

Snowpack aguanta el reemplazo de módulos calientes específicos para JavaScript, módulos CSS, así como CSS listos para utilizar. También cuenta con una sólida comunidad de complementos.