Qué es un empaquetador de módulos JS
Contenido del curso
Webpack
Parcel
ESBuild
Rollup
Vite
Conclusiones
Qué es un empaquetador de módulos JS
Qué es un empaquetador de módulos JS
Contenido del curso
Uriel Solis Salinas
Max Andy Diaz Neyra
Brandon James Huamán Mallcco
Max Andy Diaz Neyra
Royer Guerrero Pinilla
David Rangel
Brandon James Huamán Mallcco
Diego Andrés Rojas Pinzón
Kenneth Angulo L
Christopher Daniel Martínez Soto
Jefred Bedoya
David Rangel
Jose Ever Muñoz Muñoz
Max Andy Diaz Neyra
N40 M10
Neils Alfaro Bendezu
Seba Cardoso
Johan Arena
Mi resumen, espero les sirva :) . Módulos: Es algo muy importante que nos vamos a encontrar en el ecosistema de JavaScript, existen diferentes terminos: CJS, ESM, AMD, IIFE, UMD, y otros más, que no son más que propuestas que a lo largo del tiempo de vida de JS y de la web han existido para resolver una particularidad, poder preparar nuestros proyectos para que lleguen a los usuarios. .
var module = (function () { /* Data */ /* Methods */ // Revealing module return { /* Public data/methods */ }; })(); module.data; module.method();
// module-name.js module.exports = { /* ... */ } // index.js const module = require("./module-name.js"); const package = require("package"); module.method();
define(['dep1', 'dep2'], function (dep1, dep2) { /* ... */ return { /* ... */ }; });
// module.js export const data = 42; export const method = () => console.log("Hello"); // index.js import { data, method } from "./module.js";
¿Qué es un empaquetador de módulos de JavaScript? No es más que una pieza de software que nos permite tener todo un proyecto bien dividido en diferentes elementos que pueden ser también imágenes, estilos, entre otros recursos, y trabajar con la división de nuestro proyecto que este construido en JS en diferentes módulos y con ello generar un único archivo con la unión de todos estos. . Resumen Un módulo son piezas de código que vamos a separar dentro de nuestro proyecto, pueden ser componentes, utilerías, y diferentes recursos que tendrá nuestro proyecto. Y un empaquetador es poder tener nuestro código muy bien organizado independientemente de como va a llegar al usuario.
Excelente resumen papu. Quiero agregar sobre los sistemas de modulos CJS y ESM:
No entendí muy bien esta clase, asi que hice mi propia investigación. Entonces llegué a la siguiente conclusión:
Trabajar con módulos tiene muchas ventajas como reutilización de código, mejor organización, facilita el debugging, entre otros. CJS, ESM, AMD, IIFE y UMD son formatos (más bien técnicas) para modularizar código JS. Cada uno de estos formatos modulariza el código en javascript de distinta manera. Lo que hace un empaquetador (como webpack y rollup) es coger todos estos modulos en javascript y juntarlos en un solo archivo, para esto hace uso de los formatos mencionados al inicio.
Los formatos que mecionas son conocidos como sistemas de modulos y como bien dices define como se comunicaran los modulos. Los modulos vendrian a ser partes del código , usualmente separados en archivos, los cuales podran ser usados por otros modulos
IIFEE Example
(function () { console.log('Hi from IFFE') })()
/* IIFE (Immediately Invoked Function Expression) Explicación: Una IIFE es una función que se define y ejecuta inmediatamente. Se usa para evitar conflictos en el ámbito global y para encapsular código. Ejemplo: javascript */ (function() { let mensaje = "Hola desde IIFE"; console.log(mensaje); })(); /*CJS (CommonJS) Explicación: CommonJS es un estándar para módulos en JavaScript, principalmente utilizado en Node.js. Los módulos se definen con module.exports y se importan con require. Ejemplo: Archivo módulo.js: javascript*/ module.exports = { saludar: function() { return "Hola desde CommonJS"; } }; /*Archivo main.js: javascript const modulo = require('./módulo'); console.log(modulo.saludar()); AMD (Asynchronous Module Definition) Explicación: AMD es un formato de módulo diseñado para la carga asincrónica de módulos, especialmente útil en entornos de navegador. Los módulos se definen con define y se pueden cargar asincrónicamente. Ejemplo: Archivo módulo.js: javascript*/ define(['dep1', 'dep2'], function (dep1, dep2) { return { iniciar: function() { return "Hola desde AMD"; } }; }); /*Archivo main.js: javascript*/ require(['módulo'], function (modulo) { console.log(modulo.iniciar()); }); /*ESM (ECMAScript Modules) Explicación: ESM es el estándar moderno para módulos en JavaScript, soportado tanto en navegadores como en Node.js con la extensión .mjs o con "type": "module" en package.json. Usa import y export para manejar módulos. Ejemplo: Archivo módulo.mjs: javascript*/ export function saludar() { return "Hola desde ESM"; } /*Archivo main.mjs: javascript*/ import { saludar } from './módulo.mjs'; console.log(saludar()); /*Resumen: IIFE: Encapsula el código para evitar contaminar el ámbito global. CJS: Sincrónico, usado principalmente en Node.js. AMD: Asincrónico, ideal para entornos de navegador con carga dinámica. ESM: El estándar actual, soporte nativo en navegadores modernos y Node.js, sintaxis más limpia y moderna. Cada uno tiene sus ventajas dependiendo del contexto de uso y las necesidades específicas del proyecto.*/ ```IIFE (Immediately Invoked Function Expression) Explicación: Una IIFE es una función que se define y ejecuta inmediatamente. Se usa para evitar conflictos en el ámbito global y para encapsular código. Ejemplo: javascript (function() {   let mensaje = "Hola desde IIFE";   console.log(mensaje); })(); CJS (CommonJS) Explicación: CommonJS es un estándar para módulos en JavaScript, principalmente utilizado en Node.js. Los módulos se definen con module.exports y se importan con require. Ejemplo: Archivo módulo.js: javascript module.exports = {   saludar: function() {   return "Hola desde CommonJS";   } }; Archivo main.js: javascript const modulo = require('./módulo'); console.log(modulo.saludar()); AMD (Asynchronous Module Definition) Explicación: AMD es un formato de módulo diseñado para la carga asincrónica de módulos, especialmente útil en entornos de navegador. Los módulos se definen con define y se pueden cargar asincrónicamente. Ejemplo: Archivo módulo.js: javascript define(\['dep1', 'dep2'], function (dep1, dep2) {   return {   iniciar: function() {   return "Hola desde AMD";   }   }; }); Archivo main.js: javascript require(\['módulo'], function (modulo) {   console.log(modulo.iniciar()); }); ESM (ECMAScript Modules) Explicación: ESM es el estándar moderno para módulos en JavaScript, soportado tanto en navegadores como en Node.js con la extensión .mjs o con "type": "module" en package.json. Usa import y export para manejar módulos. Ejemplo: Archivo módulo.mjs: javascript export function saludar() {   return "Hola desde ESM"; } Archivo main.mjs: javascript import { saludar } from './módulo.mjs'; console.log(saludar()); Resumen: IIFE: Encapsula el código para evitar contaminar el ámbito global.  CJS: Sincrónico, usado principalmente en Node.js. AMD: Asincrónico, ideal para entornos de navegador con carga dinámica. ESM: El estándar actual, soporte nativo en navegadores modernos y Node.js, sintaxis más limpia y moderna. Cada uno tiene sus ventajas dependiendo del contexto de uso y las necesidades específicas del proyecto.
Entonces... CJS, ESM, AMD, IIFE y UMD son empaquetadores?
Ajustes en la analogía:
¿Cuál es la mejor forma de dividir código?
La estrategia ideal es separar tu código basándote en la responsabilidad única. En lugar de tener un archivo gigante de miles de líneas, debes crear módulos pequeños donde cada archivo haga una sola cosa muy bien. Por ejemplo, puedes tener una carpeta para componentes visuales (como botones o barras de navegación), otra para utilidades (funciones matemáticas o formateadores de fechas) y otra para configuraciones (conexiones a bases de datos o APIs). Al usar export en cada uno de estos pequeños archivos, creas piezas de Lego independientes. Cuando necesites construir una funcionalidad compleja, simplemente usas import para traer las piezas exactas que requieres. Esta modularidad no solo hace que encontrar errores sea trivial, sino que permite a diferentes desarrolladores trabajar en el mismo proyecto sin sobrescribir el código del otro.
require para importar módulos y module.exports para exportar funciones, objetos o variables.import y export para gestionar módulos.define para definir módulos y require para cargarlos de manera asíncrona.Evolución de los Módulos en JavaScript
import y export, permitiendo dividir el código en archivos especializados de forma eficiente.El Rol del Empaquetador (Bundler)
Les comparto algo de información que obtuve sobre un "empaquetador" o "bundler":
Un empaquetador web (o bundler) es una herramienta que se utiliza para empaquetar y procesar archivos de código fuente, como JavaScript, CSS y HTML, para prepararlos para su implementación en un sitio web o aplicación web.
El empaquetador web realiza varias tareas, como:
- Concatenar archivos: combina varios archivos en uno solo para reducir el número de solicitudes HTTP.
- Minificar archivos: elimina caracteres innecesarios, como espacios y tabuladores, para reducir el tamaño del archivo.
- Transpilar archivos: convierte código escrito en una versión moderna de JavaScript en una versión compatible con navegadores más antiguos.
- Gestionar dependencias: gestiona las dependencias entre archivos y garantiza que se carguen en el orden correcto.
Algunos ejemplos de empaquetadores web populares son Webpack, Rollup y Parcel.
La clase es muy confusa, menciona muchas cosas pero no explica casi ningún concepto realmente, la información, las analogías que usa para simplificar los conceptos, los hace más difíciles de entender.
Modulos y sistemas de modulos
En otras palabras podemos entender a los modulos como palabras y a los sistemas de modulo como idiomas ( ingles y castellano por ejemplo). Ambos nos permiten trabajar con palabras pero definen la forma de usarlas de manera disintate, distinto formato.
Maravilloso, voy de nuevo con empaquetadores, me perdí en el curso de webpack por que al parecer no estaba del todo preparado, gracias a que seguí una de las nuevas rutas de la escuela web. Ahora que decidí retomar la antigua ruta web tengo mas herramientas para este tipo de cursos. Vamos!!
Esperaba con ansias este curso, lo importante que es conocer a detalle los empaquetadores y como estos ayudan a los frameworks a brindarnos a una buena experiencia de desarrollo.
Gracias a los modulos todo el mundo puede colaborar creando herramientas. En una app normal utiliza muchos modulos. Gracias a esto tenemos herramientas como React, Vue, Angular, Svelte, Qwik
I'm the first one :3