Módulos JavaScript são uma forma de organizar e reutilizar código JavaScript. O uso de módulos pode dividir o código em partes menores e gerenciáveis, que podem então ser importadas e usadas em outras partes de um aplicativo, conforme necessário. Essa abordagem modular ajuda a manter uma base de código limpa, facilita a depuração e melhora a reutilização do código.

Módulos ES vs. CommonJS

Existem diferentes sistemas de módulos no ecossistema JavaScript. ES Modules (ESM) é o padrão na especificação ECMAScript, usado principalmente no navegador e cada vez mais suportado em Node.js. CommonJS é outro sistema de módulo tradicionalmente usado em Node.js.

Módulos ES (ESM)

Módulos ES (ESM) são um sistema de módulos padronizados em JavaScript, que foi introduzido no ECMAScript 2015 (ES6). Eles permitem uma melhor organização e reutilização do código, permitindo a importação e exportação de funções, objetos e primitivas entre diferentes arquivos. Este sistema de módulos é amplamente suportado em ambientes JavaScript modernos, incluindo navegadores e Node.js.

Exportar e importar

A palavra-chave export rotula variáveis ​​e funções que devem ser acessíveis de fora do módulo atual, permitindo que sejam reutilizadas em outras partes do seu aplicativo. A palavra-chave import permite a importação dessas funcionalidades de outros módulos, possibilitando programação modular e reutilização de código.

A exportação nomeada permite que vários itens sejam exportados de um módulo. Cada item deve ser importado com o mesmo nome com que foi exportado.

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

Ao importar exportações nomeadas, você precisa usar os mesmos nomes das exportações.

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

A exportação padrão permite uma única exportação padrão por módulo. O item pode ser importado com qualquer nome.

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

Ao importar a exportação padrão, você pode usar qualquer nome.

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

Usando módulos em HTML

Ao usar módulos em um navegador, você precisa incluí-los em seu arquivo HTML. Você usa o atributo type="module" na tag

Suporte ao navegador

Os navegadores modernos suportam módulos JavaScript nativamente. Isso inclui Chrome, Firefox, Safari, Edge e Opera. No entanto, navegadores mais antigos como o Internet Explorer não suportam módulos. Para esses, pode ser necessário usar um empacotador como o Webpack ou um transpilador como o Babel.

Usando módulos em Node.js
Para usar módulos ES em Node.js, você pode usar a extensão de arquivo .mjs ou definir "type": "module" no arquivo package.json.

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

Importar aliases

Aliases em módulos JavaScript permitem importar e exportar funcionalidades usando nomes diferentes. Isto pode ser útil para evitar conflitos de nomenclatura ou para fornecer nomes mais descritivos no contexto do módulo que os importa.

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

Você pode importar essas funções com nomes diferentes usando aliases:

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


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

Importando o módulo inteiro como um alias

Você pode importar o módulo inteiro como um único alias, o que permite acessar todas as exportações em um namespace.

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


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

Importação dinâmica

Você também pode importar módulos dinamicamente usando a função import(), que retorna uma promessa. Isso é útil para divisão de código e carregamento lento.

// 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();

Neste exemplo, o módulo math.js é carregado dinamicamente quando a função loadModule é chamada.

CommonJS (CJS)

CommonJS é um sistema de módulos usado principalmente em Node.js. Era o sistema de módulos padrão antes dos Módulos ES serem padronizados e ainda é amplamente usado em muitos projetos Node.js. Ele usa require() para importar módulos e module.exports ou exports para exportar funcionalidade de um módulo.

No CommonJS, module.exports e exports são usados ​​para exportar valores de um módulo. exports é essencialmente uma abreviação de module.exports, permitindo que qualquer um seja usado. No entanto, normalmente é aconselhável usar module.exports consistentemente para evitar possíveis confusões ou comportamentos inesperados.

Neste exemplo, module.exports recebe uma função, portanto, a chamada require em app.js retorna essa função.

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

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

Neste exemplo, exports é usado para adicionar propriedades a module.exports. A chamada require em app.js retorna um objeto com funções de adição e subtração.

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

Os módulos JavaScript oferecem vários benefícios que melhoram a organização, a capacidade de manutenção e o desempenho do código.

• Reutilização
  Os módulos permitem que você escreva trechos de código reutilizáveis ​​que podem ser importados e usados ​​em diferentes partes da sua aplicação ou até mesmo em diferentes projetos.

• Manutenção
  Ao dividir o código em módulos menores e independentes, você pode gerenciar e manter sua base de código com mais eficiência. Isso torna mais fácil atualizar, refatorar e depurar módulos individuais sem afetar o aplicativo inteiro.

• Divisão de código
  Os módulos permitem a divisão de código, o que permite carregar apenas o código necessário quando necessário, melhorando os tempos de carregamento inicial e o desempenho geral.

• Testes aprimorados
  O código modular é mais fácil de testar porque você pode testar módulos individuais isoladamente. Isso leva a testes mais confiáveis ​​e fáceis de manter.

• Árvore tremendo
  Os empacotadores de módulos modernos, como Webpack e Rollup, podem realizar a agitação da árvore, uma técnica que remove o código não utilizado do pacote final, resultando em um código menor e mais eficiente.

Conclusão

No desenvolvimento de JavaScript, a introdução de módulos ES marcou uma mudança significativa em relação ao sistema de módulos CommonJS tradicional. Os Módulos ES oferecem uma maneira padronizada e eficiente de gerenciar dependências e melhorar a capacidade de manutenção. A sintaxe de exportação e importação fornece uma forma clara e concisa de definir e utilizar módulos, promovendo melhor organização e legibilidade na base de código.