Os módulos JavaScript desempenham um papel crucial na organização do código, melhorando a capacidade de reutilização e melhorando a capacidade de manutenção dos aplicativos. Dois sistemas de módulos primários amplamente utilizados são CommonJS (CJS) e ECMAScript Modules (ESM). Compreender suas diferenças e capacidades é fundamental para aproveitá-los de forma eficaz em seus projetos.

CommonJS (CJS)

CommonJS é o sistema de módulos originalmente projetado para ambientes Node.js. Ele enfatiza a simplicidade e o carregamento síncrono de módulos.

Módulos de exportação/importação CommonJS

Módulos em CommonJS usam module.exports para exportar valores, objetos ou funções.

1. Exportação/importação padrão

// 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. Exportações/importações nomeadas

// 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, introduzido no ES6 (ES2015), é o sistema de módulo padronizado para JavaScript. Ele oferece suporte ao carregamento de módulo síncrono e assíncrono e é suportado nativamente em navegadores modernos e em Node.js com determinadas configurações.

Módulos de exportação ECMAScript

ESM usa instruções de exportação para exportar valores, objetos ou funções.

1. Exportação/importação padrão

// 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. Exportações nomeadas

// 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 exportação mistos em 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!

Principais diferenças entre CommonJS e ESM

• Sintaxe: CommonJS usa require() e module.exports, enquanto ESM usa instruções de importação e exportação.
• Carregamento: os módulos CommonJS são carregados de forma síncrona, enquanto o ESM suporta carregamento síncrono e assíncrono.
• Ambiente: CommonJS é usado principalmente em Node.js, enquanto ESM tem suporte nativo em navegadores e pode ser usado em Node.js com configurações específicas (sinalizador --experimental-modules ou extensão de arquivo .mjs).

Compatibilidade e uso

• Node.js: CommonJS continua predominante devido ao seu suporte de longa data e simplicidade em ambientes Node.js.
• Navegadores: o ESM está ganhando popularidade à medida que os navegadores o suportam cada vez mais nativamente, oferecendo melhor desempenho e carregamento modular de código.

Conclusão

A escolha entre os módulos CommonJS e ECMAScript depende do ambiente e dos requisitos do seu projeto. Embora o CommonJS seja robusto para o desenvolvimento de back-end do Node.js, o ESM oferece interoperabilidade entre navegadores e aplicativos Node.js modernos. A compreensão desses sistemas de módulos capacita os desenvolvedores a aproveitar os recursos modulares do JavaScript de maneira eficaz.

Ao aproveitar CommonJS ou ESM, os desenvolvedores podem aprimorar a organização do código, melhorar a escalabilidade do projeto e facilitar a colaboração em projetos JavaScript.