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

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?

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.

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

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.

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

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

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

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.

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