¿Qué es un empaquetador de módulos de JavaScript?

2/23
Recursos
Transcripción

Aportes 12

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.
.

  • Immediately invoked function expression (IIFE): Forma en la que dentro de JS, se podrá invocar inmediatamente una función, lo que se hace es encapsularla en una función anónima y llamarla al final.
var module = (function () {
  /* Data */
  /* Methods */

  // Revealing module
  return {
    /* Public data/methods */
  };
})();

module.data;
module.method();
  • CommonJS (CJS): Propuesta que nace en el 2009, alternativa para crear modulos en JS. Tiene una funcionalidad particular para trabajar de forma asincrona con los modulos.
// module-name.js
module.exports = {
  /* ... */
}

// index.js
const module = require("./module-name.js");
const package = require("package");

module.method();
  • AMD (Asynchronous Module Definition): Permite cargar modulos del lado del cliente.
define(['dep1', 'dep2'], function (dep1, dep2) {
  /* ... */

  return {
    /* ... */
  };
});
  • ES Modules (ESM): Forma en la que vamos a poder incorporar, importar o exportar.
// 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.

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.

IIFEE Example

(function () {
  console.log('Hi from IFFE')
})()
1. **JS (CommonJS)**: CommonJS es un sistema de módulos utilizado en JavaScript principalmente en el entorno del lado del servidor, como Node.js. Permite dividir el código en módulos reutilizables y utiliza `require` para importar módulos y `module.exports` para exportar funciones, objetos o variables. 2. **ESM (ECMAScript Modules)**: ESM es el sistema de módulos nativo de JavaScript introducido en ECMAScript 6 (ES6). Proporciona una forma estándar de importar y exportar código en aplicaciones JavaScript, tanto en el navegador como en Node.js. Se utiliza `import` y `export` para gestionar módulos. 3. **AMD (Asynchronous Module Definition)**: AMD es otro sistema de módulos utilizado en JavaScript, especialmente en el navegador. Se enfoca en la carga asíncrona de módulos, lo que es útil para aplicaciones web más grandes y complejas. Se usa `define` para definir módulos y `require` para cargarlos de manera asíncrona. 4. **IIFE (Immediately Invoked Function Expression)**: IIFE es un patrón de código que se utiliza para encapsular variables y funciones en un ámbito local para evitar contaminar el ámbito global. Se define una función anónima y se la invoca inmediatamente, lo que la hace útil para crear bloques de código autoejecutables.
```js /* 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.
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

  • Los sistemas de módulos son el conjunto de utilidades que permite la comunicación de distintas partes del código. Habitualmente están separados en archivos.
  • Los módulos son partes del código la cual puede ser utilizada por otros módulos.
  • Sus variables y funciones solo son accesibles dentro de la misma a menos que sean exportados. En los archivos donde se quiera usar deberán ser importadas.
  • Con esto se mejora:
    • Encapsular funcionalidad e incrementar la reusabilidad.
    • Mejoraremos la estructura de nuestros proyectos.
    • Con ello mejorara también la seguridad.

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