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

2/23
Recursos
Transcripción

Aportes 10

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.

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