Exportando e Importando Componentes de Módulos em JavaScript

Exportação Nomeada de Componentes de Módulo

Para que possamos conectar e usar componentes de um módulo (variáveis/constantes/funções/classes) em outro módulo, precisamos exportá-los. Podemos exportar cada componente individualmente. Para isso, usamos a palavra-chave export antes da definição do componente. Por exemplo, considere o seguinte módulo message.js:

// exportando uma variável
export let welcome = "Welcome";
// exportando uma constante
export const hello = "Hello";

// exportando uma função
export function sayHello() {
  console.log("Hello Programício");
}

// exportando uma classe
export class Messenger {
  send(text) {
    console.log("Sending message:", text);
  }
}

Aqui estamos exportando a variável welcome, a constante hello, a função sayHello() e a classe Messenger. Vale ressaltar que não precisamos exportar todos os componentes do módulo; alguns componentes podem ser usados apenas dentro do próprio módulo.

Como alternativa, podemos exportar todos os componentes juntos como uma lista:

let welcome = "Welcome";
const hello = "Hello";

function sayHello() {
  console.log("Hello Programício");
}

class Messenger {
  send(text) {
    console.log("Sending message:", text);
  }
}

export { welcome, hello, sayHello, Messenger };

Ambos os métodos de exportação são equivalentes.

Importação Nomeada de Componentes de Módulo

Podemos importar componentes de forma individual. Para isso, usamos o operador import seguido pelos nomes dos componentes entre chaves. Após o operador from, especificamos o módulo de onde estamos importando.

import { componente1, componente2, ... componenteN } from "caminhoDoMódulo";

Por exemplo, vamos importar no módulo main.js os componentes exportados do módulo message.js:

import { sayHello, welcome, Messenger } from "./message.js";

sayHello();

const telegram = new Messenger();
telegram.send(welcome);

Aqui, estamos importando do módulo message.js a variável welcome, a função sayHello() e a classe Messenger. Não é necessário importar todos os componentes do módulo; podemos importar apenas aqueles que precisamos e pretendemos usar.

Ao executar a página no navegador, veremos o resultado dos componentes importados no módulo main.js no console:

Hello Programício
Sending message: Welcome

Importação de Todo o Módulo

Se o módulo tiver muitos componentes e quisermos usar todas as suas funcionalidades, listar todos os componentes pode ser cansativo. Nesse caso, podemos importar todo o módulo de uma vez:

import * as alias_do_módulo from "módulo";

Após o operador import, usamos o asterisco para indicar que queremos importar todos os componentes exportados. O alias do módulo, especificado após as, será usado para referenciar o módulo importado.

Por exemplo, vamos importar todo o módulo message.js no arquivo main.js:

import * as MessageModule from "./message.js";

MessageModule.sayHello();

const telegram = new MessageModule.Messenger();
telegram.send(MessageModule.welcome);

Neste caso, o módulo message.js é referenciado pelo identificador MessageModule. Podemos usar qualquer nome como alias do módulo. Em seguida, podemos acessar todos os componentes exportados do módulo através do alias, como MessageModule.sayHello().