O export é utilizado quando criamos módulos JavaScript para exportar ligações em tempo real para suas funções, objetos ou valores primitivos de um módulo sejam utilizados por outros programas através de declaraçõesimport. Ligações que são exportadas ainda podem ser modificadas localmente; quando importadas, embora elas possam ser lidas somente pelo módulo que as importou, seu valor é atualizado sempre que ela modificada pelo módulo que a exportou.

Módulos exportados ficam emstrict mode, independentemente se é declarado dessa forma, ou não. Export não pode ser utilizado em scripts embutidos.

Sintaxe

Há dois tipos de exportação:

1. Exportações Explícitas (Named Exports) (Zero ou mais exports por módulo)
2. Exportações Padrão (Default Exports) (Uma por módulo)

// Exportando recursos individuaisexport let name1, name2, …, nameN; // também var, constexport let name1 = …, name2 = …, …, nameN; // também var, constexport function functionName(){...}export class ClassName {...}// Lista de exportaçõesexport { name1, name2, …, nameN };// Renomeando exportsexport { variable1 as name1, variable2 as name2, …, nameN };// Exportando atribuições desestruturadas renomeandoexport const { name1, name2: bar } = o;// Exportações Padrão (Default exports)export default expression;export default function (…) { … } // também class, function*export default function name1(…) { … } // também class, function*export { name1 as default, … };// Agregando módulosexport * from …; // não define a exportação padrãoexport * as name1 from …; // Draft ECMAScript® 2O21export { name1, name2, …, nameN } from …;export { import1 as name1, import2 as name2, …, nameN } from …;export { default } from …;

nameN

Identificador para ser exportado (assim ele pode ser importado viaimport em outro script).

Descrição

Há dois diferentes tipos de export, explícito(named) e padrão(default). Pode-se ter várias exportações explícitas por módulo, mas apenas uma padrão. Cada tipo corresponde à uma da síntaxe acima:

Exportações explícitas:

// exporta recursos declarados anteriomenteexport { myFunction, myVariable };// exporta recursos individuais (pode exportar var, let,// const, function, class)export let myVariable = Math.sqrt(2);export function myFunction() { ... };

Exportação padrão (pode ser feita apenas uma por script):

// exporta um recurso declarado anteriormente como padrãoexport { myFunction as default };// exporta recursos individuais como padrãoexport default function () { ... }export default class { .. }

Exportações explícitas são úteis para exportar vários valores. Durante a importação, é obrigatório usar o mesmo nome do objeto correspondente.

Mas a exportação padrão pode ser importada com qualquer nome, por exemplo:

// arquivo test.jslet k;export default k = 12;

// algum outro arquivoimport m from "./test"; // note que temos a liberdade de usar import m ao invés de import k, porque k era uma exportaçào padrãoconsole.log(m); // vai retornar log 12

Você também pode renomear exportações explícitas para evitar conflitos e nome:

export { myFunction as function1, myVariable as variable };

Re-exportando / Agregando

É possível também "importar/exportar" de módulos diferentes em um módulo pai, de modo que eles estejam disponíveis para serem importados daquele módulo. Em outras palavras, pode-se criar um módulo único concentrando várias exportações de vários módulos.

Isto pode ser feito com a sintaxe "export from":

export { default as function1, function2 } from "bar.js";

O que é comparável com um combinação de import e export:

import { default as function1, function2 } from "bar.js";export { function1, function2 };

Mas ondefunction1 efunction2 não ficam disponíveis dentro do módulo atual.

import DefaultExport from "bar.js"; // Válido

export DefaultExport from "bar.js"; // Inválido

O modo correto de fazer isso e renomeando o export:

export { default as DefaultExport } from "bar.js";

Exemplos

Usando exportações explícitas

Em um módulomy-module.js poderiamos usar o seguinte código:

// módulo "my-module.js"function cube(x) {  return x * x * x;}const foo = Math.PI + Math.SQRT2;var graph = {  options: {    color: "white",    thickness: "2px",  },  draw: function () {    console.log("Da função draw de graph");  },};export { cube, foo, graph };

Então, no módulo principal incluído sem sua página HTML, poderíamos ter:

import { cube, foo, graph } from "./my-module.js";graph.options = {  color: "blue",  thickness: "3px",};graph.draw();console.log(cube(3)); // 27console.log(foo); // 4.555806215962888

É importante notar o seguinte:

• Você pode incluir esse script no seu código HTML através do elemento<script> do tipo="module", de modo que ele seja reconhecido e tratado apropriadamente.
• Você não pode executar módulos JS através defile:// URL — você receberá errorsCORS. Você deve rodá-los através de um servidor HTTP.

Usando a exportação padrão

Se queremos exportar um valor sozinho ou obter um valor de reserva para o nosso módulo, nós poderiamos usarexport default:

// módulo "my-module.js"export default function cube(x) {  return x * x * x;}

Daí em outro script podemos usar:

import cube from "my-module";console.log(cube(3)); // 27

Especificações

Compatibilidade

Veja também

• import
• ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
• Axel Rauschmayer's book: "Exploring JS: Modules"