Entendendo Módulos em JavaScript

Imagine que utilizando um código para gerar um aplicativo de listas com nomes, você precise "chamar" uma outra tela que irá guardar o raciocínio de adicção e exclusão das listagens. Como fazer isso, quando ele está separado em outro arquivo? Para isso, fazemos o uso de Módulos. Veremos o que eles são e exemplos de como são utilizados.

Uma das novidades que surgiu na atualização EcmaScript6 foi a criação dos módulos.

Um módulo é apenas um arquivo. Um script é um módulo. Tão simples como isso.

Os módulos podem carregar uns aos outros e usar diretivas especiais exporte importpara trocar funcionalidade, chamar funções de um módulo de outro. Eles são uma forma de organizar o código em pequenas partes reutilizáveis e encapsuladas.

Exemplo:

// 📁 sayHi.js
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}

Há duas formas principais de se trabalhar com módulos em JavaScript: CommonJS e ECMAScript Modules (ES Modules).

CommonJS -

O CommonJS é um padrão que foi criado para ser usado no desenvolvimento de aplicações server-side com Node.js

// arquivo "module1.js"
const message = "Este é um exemplo de módulo CommonJS";

module.exports = message;

// arquivo "app.js"
const message = require("./module1");

console.log(message);

ECMAScript Modules

Já o Ecma módulo, é utilizado no JavaScript para a maior parte dos navegadores, o foco desse artigo.

// arquivo "module2.js"
export const message = "Este é um exemplo de módulo ES Modules";

// arquivo "app.js"
import { message } from "./module2";

console.log(message);

Com isso, vimos que os módulos em JavaScript são uma ótima maneira de organizar o código em pequenas partes reutilizáveis e mantê-lo limpo e fácil de gerenciar. Além disso, eles permitem que você importe e exporte facilmente funções, objetos e valores entre arquivos, tornando o desenvolvimento mais fácil e eficiente. Se você ainda não está usando módulos em seu código, é uma boa ideia começar a fazê-lo agora.