Los módulos JavaScript son una forma de organizar y reutilizar el código JavaScript. El uso de módulos puede dividir el código en partes más pequeñas y manejables, que luego pueden importarse y usarse en otras partes de una aplicación según sea necesario. Este enfoque modular ayuda a mantener una base de código limpia, facilita la depuración y mejora la reutilización del código.

Módulos ES frente a CommonJS

Existen diferentes sistemas de módulos en el ecosistema de JavaScript. ES Modules (ESM) es el estándar en la especificación ECMAScript, se utiliza principalmente en el navegador y es cada vez más compatible con Node.js. CommonJS es otro sistema de módulos que se usaba tradicionalmente en Node.js.

Módulos ES (ESM)

Los módulos ES (ESM) son un sistema de módulos estandarizado en JavaScript, que se introdujo en ECMAScript 2015 (ES6). Permiten una mejor organización y reutilización del código al permitir la importación y exportación de funciones, objetos y primitivas entre diferentes archivos. Este sistema de módulos es ampliamente compatible con entornos JavaScript modernos, incluidos navegadores y Node.js.

Exportar e importar

La palabra clave de exportación etiqueta las variables y funciones a las que se debe acceder desde fuera del módulo actual, lo que permite reutilizarlas en otras partes de su aplicación. La palabra clave import permite la importación de estas funcionalidades desde otros módulos, lo que permite la programación modular y la reutilización de código.

La exportación con nombre permite exportar varios elementos desde un módulo. Cada elemento debe importarse con el mismo nombre con el que se exportó.

//modules.js
const greet = () => {
   console.log('Hello World');
};
export { greet};

Al importar exportaciones con nombre, debe utilizar los mismos nombres que las exportaciones.

import { greet } from './module.js';
greet(); // Hello, World!

La exportación predeterminada permite una única exportación predeterminada por módulo. El artículo se puede importar con cualquier nombre.

//modules.js
const greet = () => {
   console.log('Hello World');
};
export default greet;

Al importar la exportación predeterminada, puede usar cualquier nombre.

import message  from './module.js';
message(); // Hello, World!

Uso de módulos en HTML

Cuando utilices módulos en un navegador, debes incluirlos en tu archivo HTML. Utiliza el atributo type="module" en la etiqueta

Soporte del navegador

Los navegadores modernos admiten módulos JavaScript de forma nativa. Esto incluye Chrome, Firefox, Safari, Edge y Opera. Sin embargo, los navegadores más antiguos como Internet Explorer no admiten módulos. Para estos, es posible que necesites usar un paquete como Webpack o un transpilador como Babel.

Usando módulos en Node.js
Para usar módulos ES en Node.js, puede usar la extensión de archivo .mjs o configurar "type": "module" en el archivo package.json.

// package.json
{
 "type": "module"
}

Importar alias

Los alias en los módulos de JavaScript le permiten importar y exportar funcionalidades usando diferentes nombres. Esto puede resultar útil para evitar conflictos de nombres o para proporcionar nombres más descriptivos en el contexto del módulo que los importa.

// math.js
export function add(a, b) {
   return a   b;
}
 export function subtract(a, b) {
   return a - b;
}

Puedes importar estas funciones con diferentes nombres usando alias:

// main.js
import { add as sum, subtract as diff } from './math.js';


console.log(sum(2, 3)); // 5
console.log(diff(5, 3)); // 2

Importación del módulo completo como alias

Puedes importar el módulo completo como un único alias, lo que te permite acceder a todas las exportaciones bajo un espacio de nombres.

// main.js
import * as math from './math.js';


console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 3)); // 2

Importación dinámica

También puedes importar módulos dinámicamente usando la función import(), que devuelve una promesa. Esto es útil para la división de código y la carga diferida.

// main.js
const loadModule = async () => {
   try {
     const module = await import('./math.js');
     console.log(module.add(2, 3));
   } catch (error) {
     console.error('loading error:', error);
   }
 };


 loadModule();

En este ejemplo, el módulo math.js se carga dinámicamente cuando se llama a la función loadModule.

JS común (CJS)

CommonJS es un sistema de módulos utilizado principalmente en Node.js. Era el sistema de módulos predeterminado antes de que se estandarizaran los módulos ES y todavía se usa ampliamente en muchos proyectos de Node.js. Utiliza require() para importar módulos y module.exports o exports para exportar la funcionalidad de un módulo.

En CommonJS, tanto module.exports como exports se utilizan para exportar valores de un módulo. exports es esencialmente una abreviatura de module.exports, lo que permite utilizar cualquiera de los dos. Sin embargo, normalmente se recomienda utilizar module.exports de forma constante para evitar posibles confusiones o comportamientos inesperados.

En este ejemplo, a module.exports se le asigna una función, por lo que la llamada require en app.js devuelve esa función.

// greet.js
module.exports = function(name) {
   return `Hello, ${name}!`;
};

// app.js
const greet = require('./greet');
console.log(greet('Alice')); // 'Hello, Alice!'

En este ejemplo, las exportaciones se utilizan para agregar propiedades a module.exports. La llamada require en app.js devuelve un objeto con funciones de sumar y restar.

// math.js
exports.add = function(a, b) {
   return a   b;
};
exports.subtract = function(a, b) {
   return a - b;
};

// app.js
const math = require('./math');
console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 2)); // 3

Los módulos de JavaScript ofrecen numerosos beneficios que mejoran la organización, la mantenibilidad y el rendimiento del código.

• Reutilizabilidad
  Los módulos le permiten escribir fragmentos de código reutilizables que pueden importarse y usarse en diferentes partes de su aplicación o incluso en diferentes proyectos.

• Mantenibilidad
  Al dividir el código en módulos más pequeños e independientes, puede administrar y mantener su base de código de manera más efectiva. Esto facilita la actualización, refactorización y depuración de módulos individuales sin afectar toda la aplicación.

• División de código
  Los módulos permiten la división de código, lo que le permite cargar solo el código necesario cuando sea necesario, lo que mejora los tiempos de carga inicial y el rendimiento general.

• Pruebas mejoradas
  El código modular es más fácil de probar porque puede probar módulos individuales de forma aislada. Esto conduce a pruebas más confiables y fáciles de mantener.

• Sacudida de árboles
  Los paquetes de módulos modernos como Webpack y Rollup pueden realizar sacudidas de árbol, una técnica que elimina el código no utilizado del paquete final, lo que da como resultado un código más pequeño y más eficiente.

Conclusión

En el desarrollo de JavaScript, la introducción de los módulos ES ha marcado un cambio significativo con respecto al sistema de módulos tradicional CommonJS. Los módulos ES ofrecen una forma estandarizada y eficiente de gestionar dependencias y mejorar la mantenibilidad. La sintaxis de exportación e importación proporciona una forma clara y concisa de definir y utilizar módulos, promoviendo una mejor organización y legibilidad en el código base.