Los módulos de JavaScript desempeñan un papel crucial en la organización del código, la mejora de la reutilización y la mejora de la mantenibilidad de las aplicaciones. Dos sistemas de módulos principales ampliamente utilizados son CommonJS (CJS) y ECMAScript Modules (ESM). Comprender sus diferencias y capacidades es clave para aprovecharlas de manera efectiva en sus proyectos.

JS común (CJS)

CommonJS es el sistema de módulos diseñado originalmente para entornos Node.js. Destaca la simplicidad y la carga sincrónica de módulos.

Módulos de exportación/importación de CommonJS

Los módulos en CommonJS usan module.exports para exportar valores, objetos o funciones.

1. Exportación/Importaciones predeterminadas

// logger.js
function log(message) {
    console.log(message);
}

module.exports = log; // Default export

// index.js
const log = require('./logger');

log('This is a log message.'); // Output: This is a log message.

2. Exportaciones/Importaciones nombradas

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

function subtract(a, b) {
    return a - b;
}

module.exports = { add, subtract }; // Named exports

// index.js
const { add, subtract } = require('./math');

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

Módulos ECMAScript (ESM)

ESM, introducido en ES6 (ES2015), es el sistema de módulos estandarizado para JavaScript. Admite la carga de módulos tanto sincrónica como asincrónica y es compatible de forma nativa con navegadores modernos y con Node.js con ciertas configuraciones.

Módulos de exportación de ECMAScript

ESM utiliza declaraciones de exportación para exportar valores, objetos o funciones.

1. Exportación/Importación predeterminada

// utils.mjs (Note the .mjs extension for ESM)
function formatName(name) {
    return `Mr./Ms. ${name}`;
}

export default formatName;

// index.mjs
import formatName from './utils.mjs';

console.log(formatName('John')); // Output: Mr./Ms. John

2. Exportaciones nombradas

// operations.mjs
export function multiply(a, b) {
    return a * b;
}

export function divide(a, b) {
    return a / b;
}

// index.mjs
import { multiply, divide } from './operations.mjs';

console.log(multiply(4, 2)); // Output: 8
console.log(divide(10, 2)); // Output: 5

3. Estilos de exportación mixtos en módulos ECMAScript

// mixedExports.mjs
function greet(name) {
    return `Hello, ${name}!`;
}

export default greet;

export function goodbye(name) {
    return `Goodbye, ${name}!`;
}

// index.mjs
import sayHello, { goodbye } from './mixedExports.mjs';

console.log(sayHello('Alice')); // Output: Hello, Alice!
console.log(goodbye('Bob')); // Output: Goodbye, Bob!

Diferencias clave entre CommonJS y ESM

• Sintaxis: CommonJS usa require() y module.exports, mientras que ESM usa declaraciones de importación y exportación.
• Cargando: los módulos CommonJS se cargan sincrónicamente, mientras que ESM admite la carga sincrónica y asincrónica.
• Entorno: CommonJS se usa principalmente en Node.js, mientras que ESM es compatible de forma nativa con los navegadores y se puede usar en Node.js con configuraciones específicas (indicador --experimental-modules o extensión de archivo .mjs).

Compatibilidad y uso

• Node.js: CommonJS sigue prevaleciendo debido a su soporte duradero y simplicidad en entornos Node.js.
• Navegadores: ESM está ganando popularidad a medida que los navegadores lo admiten cada vez más de forma nativa, ofreciendo mejor rendimiento y carga de código modular.

Conclusión

La elección entre los módulos CommonJS y ECMAScript depende del entorno y los requisitos de su proyecto. Si bien CommonJS es sólido para el desarrollo backend de Node.js, ESM ofrece interoperabilidad entre navegadores y aplicaciones modernas de Node.js. Comprender estos sistemas de módulos prepara a los desarrolladores para aprovechar las capacidades modulares de JavaScript de manera efectiva.

Al aprovechar CommonJS o ESM, los desarrolladores pueden mejorar la organización del código, mejorar la escalabilidad del proyecto y facilitar la colaboración en proyectos de JavaScript.