Exportação e Importação Default - JavaScript

Na exportação, podemos definir um componente que será exportado por padrão utilizando o operador default. Por exemplo, vamos definir o seguinte módulo message.js:

export default function sayHello() {
  console.log("Hello from sayHello function");
}

Para fazer a exportação padrão, colocamos o operador default após o operador export.

Agora, vamos importar essa função no módulo main.js:

import sayHi from "./message.js"; // podemos nomear a função como quisermos

sayHi();

// Saída: Hello from sayHello function

Aqui, estamos importando a função sayHello() do módulo message.js e chamando-a.

Vale ressaltar que podemos ter apenas uma exportação padrão por módulo.

A vantagem da exportação padrão é que, ao importar, não precisamos saber como o componente foi nomeado dentro do módulo e podemos nomeá-lo como quisermos.

Exportação e Importação Conjunta de Componentes Individuais e Padrão

Um módulo pode exportar simultaneamente componentes individuais e um componente padrão:

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

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

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

Aqui, todos os componentes são exportados, mas apenas a função sayHello é exportada por padrão. Esta definição de módulo é equivalente à seguinte, onde os componentes são exportados por meio de 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 as default, Messenger}

Ao importar um módulo desse tipo, todos os componentes, exceto o componente padrão, devem ser importados individualmente:

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

sayHello();

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

Exportação e Importação Padrão do Módulo Inteiro

É importante lembrar que, na exportação padrão, podemos usar o operador default apenas uma vez. Não podemos exportar dois componentes separados como padrão ao mesmo tempo. No entanto, podemos exportar um conjunto de componentes como uma única entidade. Por exemplo, definimos o seguinte módulo message.js:

let welcome = "Welcome";
  const hello = "Hello";
  
function sayHello() {
  console.log("Hello Programício");
}

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

export default {welcome, hello, sayHello, Messenger}

Agora, vamos importar a funcionalidade do módulo message.js no módulo main.js:

import MessageModule from "./message.js";

MessageModule.sayHello();

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

Nesse caso, toda a lista de componentes exportados será associada ao nome MessageModule, que representará o módulo. A partir desse identificador, podemos acessar cada componente específico usando o nome do componente: MessageModule.sayHello();.