export

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

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ções import. 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 em strict 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 individuais
export let name1, name2, …, nameN; // também var, const
export let name1 = …, name2 = …, …, nameN; // também var, const
export function functionName(){...}
export class ClassName {...}

// Lista de exportações
export { name1, name2, …, nameN };

// Renomeando exports
export { variable1 as name1, variable2 as name2, …, nameN };

// Exportando atribuições desestruturadas renomeando
export 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ódulos
export * from …; // não define a exportação padrão
export * as name1 from …; // Draft ECMAScript® 2O21
export { 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 via import 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 anteriomente
export { 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ão 
export { myFunction as default };

// exporta recursos individuais como padrão 
export 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.js
let k; export default k = 12;
// algum outro arquivo
import 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ão
console.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 onde function1 e function2 não ficam disponíveis dentro do módulo atual.

Nota: Os exemplos a seguir são sintaticamente inválidos apesar de sua equivalência com o import:

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ódulo my-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)); // 27
console.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 de file:// URL — você receberá errors CORS. 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 usar export 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

Especificação Estado Comentário
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Exports' in that specification.
Padrão Initial definition.
ECMAScript (ECMA-262)
The definition of 'Exports' in that specification.
Padrão em tempo real

Compatibilidade

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
exportChrome Full support 61Edge Full support 16
Full support 16
Full support 15
Disabled
Disabled From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 48Safari Full support 10.1WebView Android No support NoChrome Android Full support 61Firefox Android Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Full support 45Safari iOS Full support 10.3Samsung Internet Android Full support 8.0nodejs Full support 13.2.0
Notes
Full support 13.2.0
Notes
Notes Modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module". See Node's ECMAScript Modules documentation for more details.
Full support 12.0.0
Notes Disabled
Notes Modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module". See Node's ECMAScript Modules documentation for more details.
Disabled From version 12.0.0: this feature is behind the --experimental-modules runtime flag.
Full support 8.5.0
Notes Disabled
Notes Module filenames must end with .mjs, not .js. See Node's ECMAScript Modules documentation for more details.
Disabled From version 8.5.0: this feature is behind the --experimental-modules runtime flag.
default keyword with exportChrome Full support 61Edge Full support 16
Full support 16
Full support 15
Disabled
Disabled From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 48Safari Full support 10.1WebView Android No support NoChrome Android Full support 61Firefox Android Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Full support 45Safari iOS Full support 10.3Samsung Internet Android Full support 8.0nodejs Full support 13.2.0
Notes
Full support 13.2.0
Notes
Notes Modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module". See Node's ECMAScript Modules documentation for more details.
Full support 12.0.0
Notes Disabled
Notes Modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module". See Node's ECMAScript Modules documentation for more details.
Disabled From version 12.0.0: this feature is behind the --experimental-modules runtime flag.
Full support 8.5.0
Notes Disabled
Notes Module filenames must end with .mjs, not .js. See Node's ECMAScript Modules documentation for more details.
Disabled From version 8.5.0: this feature is behind the --experimental-modules runtime flag.
export * as namespaceChrome Full support 72Edge Full support 79Firefox Full support 80IE No support NoOpera Full support 60Safari No support NoWebView Android No support NoChrome Android Full support 72Firefox Android No support NoOpera Android Full support 51Safari iOS No support NoSamsung Internet Android Full support 11.0nodejs Full support 12.0.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

Veja também