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