O que é "padrão de exportação" em javascript?


570

Arquivo: SafeString.js

// Build out our basic SafeString type
function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

export default SafeString;

Eu nunca vi export defaultantes. Existem coisas equivalentes export defaultque podem ser mais fáceis de entender?


29
Esta é uma explicação muito clara sobre este 24ways.org/2014/javascript-modules-the-es6-way
nish1013

2
exportdetalhes da palavra-chave aqui . Atualmente, ele não é suportado nativamente por nenhum navegador.
RBT

3
Agora é suportado em todos os navegadores, exceto no IE.
Brian Di Palma


Eis que procura respostas acima; procure por confusão abaixo. Eu mostrei u da wai
Andrew

Respostas:


456

Faz parte do sistema de módulos ES6, descrito aqui . Há um exemplo útil nessa documentação, também:

Se um módulo definir uma exportação padrão:

export default function() { console.log("hello!") }

então você pode importar essa exportação padrão, omitindo as chaves:

import foo from "foo";
foo(); // hello!

Atualização: a partir de junho de 2015, o sistema do módulo é definido no §15.2 e a exportsintaxe, em particular, é definida no §15.2.3 da especificação do ECMAScript 2015.


1
@GeenHenk Suponho que isso seja esperado, já que o ES6 ainda é um rascunho. Forneci um link atualizado e um aviso.
PSWG

7
Não vejo como a função padrão de exportação () {} é diferente de export = function () {} .... #
Alexander Mills

1
e nos casos em que é assim export const Foo = () => {}e, no final do arquivo export default Foo, vejo isso em vários exemplos de reação. O que há com as duas exportações?
FlavorScape 16/02

Seria bom ver um exemplo com exportações padrão e nomeadas. Em outras palavras, essa exportação que satisfaçaimport foo, { bar, baz } from './foo';
gumkins

1
Obrigado por responder, mas o uso de foo no segundo exemplo é um pouco ambíguo; o que é foo e como você nomeou o primeiro arquivo; como você pode fazer import foo from "foo"? Havia um objeto que segurava foo, pois no primeiro exemplo sua função exportada não tem nome. @pswg
nosahama

159

export default é usado para exportar uma única classe, função ou primitiva de um arquivo de script.

A exportação também pode ser escrita como

export default function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

Isso é usado para importar esta função em outro arquivo de script

Digamos no app.js , você pode

import SafeString from './handlebars/safe-string';

Um pouco sobre exportação

Como o nome diz, é usado para exportar funções, objetos, classes ou expressões de arquivos ou módulos de script

Utiliites.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

Isso pode ser importado e usado como

App.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

Ou

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

Quando o padrão de exportação é usado, isso é muito mais simples. Arquivos de script apenas exporta uma coisa. cube.js

export default function cube(x) {
  return x * x * x;
};

e usado como App.js

import Cube from 'cube';
console.log(Cube(3)); // 27

78

export default function(){}pode ser usado quando a função não tem nome. Só pode haver uma exportação padrão em um arquivo. A alternativa é uma exportação nomeada.

Esta página descreve export defaultem detalhes, bem como outros detalhes sobre os módulos que eu achei muito úteis.


14
Você pode usar as exportações padrão e nomeadas juntas, se desejar.
Bergi 13/07/2015

@Greg goma a página está desatualizada. Ele está redirecionando para exploringjs.com/es6/ch_modules.html
rajakvk

@rajakvk, True, mas a página original tem muito mais informações básicas para quem está começando.
Greg Gum

7
Esta resposta é melhor do que a aceita porque explica o que defaultsignifica e para mim a pergunta era sobre essa palavra.
Dariusz Sikorski

1
@DariuszSikorski a resposta aceita explica o que defaultsignifica, sendo que a exportação padrão pode ser importada sem o uso de chaves. Essa resposta está realmente errada, pois diz que você só pode usar defaultquando houver apenas uma exportação em um arquivo, o que não é verdade. Você pode ter várias exportações no mesmo arquivo, mas é claro que apenas uma delas pode ser definida como essa default.
realUser404

43

Estou escrevendo este post porque (presumo que estou cansado) não entendi bem nem o MDN, nem a descrição de outras pessoas e a melhor maneira de entender algo é ensiná-lo a outras pessoas. Só que não vejo uma resposta simples da pergunta.

O que é "padrão de exportação" em javascript?

Na exportação padrão, o nome da importação é completamente independente e podemos usar qualquer nome que desejar.

Ilustrarei esta linha com um exemplo simples.

Digamos que temos 3 módulos e um index.html:

  • modul.js
  • modul2.js
  • modul3.js
  • index.html

modul.js

export function hello() {
    console.log("Modul: Saying hello!");
}

export let variable = 123;

modul2.js

export function hello2() {
    console.log("Module2: Saying hello for the second time!");
}

export let variable2 = 456;

modul3.js

export default function hello3() {
    console.log("Module3: Saying hello for the third time!");
}

index.html

<script type="module">
import * as mod from './modul.js';
import {hello2, variable2} from './modul2.js';
import blabla from './modul3.js'; //! Here is the important stuff - we name the variable for the module as we like

mod.hello();
console.log("Module: " + mod.variable);

hello2();
console.log("Module2: " + variable2);

blabla();
</script>

A saída é:

modul.js:2:10   -> Modul: Saying hello! 
index.html:7:9  -> Module: 123 
modul2.js:2:10  -> Module2: Saying hello for the second time! 
index.html:10:9 -> Module2: 456 
modul3.js:2:10  -> Module3: Saying hello for the third time!

Portanto, a explicação mais longa é :

'padrão de exportação' é usado se você deseja exportar uma única coisa para um módulo.

Então a única coisa que é importante é "importação blabla de' ./modul3.js'" - poderíamos dizer em vez disso:

"importar pamelanderson de './modul3.js" e depois pamelanderson (); Isso funcionará bem quando usarmos 'export default' e basicamente é isso - ele nos permite dar o nome que quisermos quando for padrão .


Ps Se você quiser testar o exemplo - crie os arquivos primeiro, depois permita o CORS no navegador -> se você estiver usando o tipo firefox na URL do navegador: about: config -> Procure por "privacy.file_unique_origin" -> change para "false" -> abra index.html -> pressione F12 para abrir o console e veja a saída -> Enjoy e não se esqueça de retornar as configurações de cors para o padrão.

Ps2 Desculpe pela nomeação boba de variável

Mais informações @ link2medium , link2mdn1 , link2mdn2


4
Isso deve ser aceito como a melhor resposta, mas eu fiz o que pude usando meu voto positivo.
Jarmos 26/12/19

1
Muito obrigado!
Combine

1
Esta deve ser a resposta aceita mãos levantadas
nosahama

16

Conforme explicado nesta página MDN

Existem dois tipos diferentes de exportação, nomeados e padrão. Você pode ter várias exportações nomeadas por módulo, mas apenas uma exportação padrão [...] Exportações nomeadas são úteis para exportar vários valores. Durante a importação, é obrigatório usar o mesmo nome do objeto correspondente. Mas uma exportação padrão pode ser importada com qualquer nome

Por exemplo:

let myVar; export default myVar = 123; // in file my-module.js

import myExportedVar from './my-module' //  we have the freedom to use 'import myExportedVar' instead of 'import myVar' because myVar was defined as default export

console.log(myExportedVar);        // will log 123

6

Na minha opinião, o importante sobre a exportação padrão é que ela pode ser importada com QUALQUER nome!

se houver o arquivo foo.js que exporta o padrão:

export default function foo(){}

ele pode ser importado no bar.js usando:

import bar from 'foo'
import Bar from 'foo' //or ANY other name you wish to assign to this import


1

Existem dois tipos diferentes de exportação, nomeados e padrão . Você pode ter várias exportações nomeadas por módulo, mas apenas uma exportação padrão. Cada tipo corresponde a um dos itens acima. Fonte: MDN

Exportação nomeada

export class NamedExport1 { }

export class NamedExport2 { }

// import class
import { NamedExport1 } from 'path-to-file'
import { NamedExport2 } from 'path-to-file'

// OR you can import all at once
import * as namedExports from 'path-to-file'

Exportação padrão

export default class DefaultExport1 { }

// import class
import DefaultExport1 from 'path-to-file' // no curly braces {}

// você pode usar um nome diferente para a importação padrão

import Foo from 'path-to-file' // this will assign any default export to Foo.

-3

O padrão de exportação é usado para exportar uma única classe, função ou primitivo.

a função padrão de exportação () {} pode ser usada quando a função não tem nome. Só pode haver uma exportação padrão em um arquivo.

consulte Mais informação

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.