export default wpływa na składnię podczas importowania eksportowanej "rzeczy" , gdy pozwala importować, cokolwiek zostało wyeksportowane, wybierając nazwę w import, bez względu na to, jaka była nazwa, gdy została wyeksportowana, po prostu dlatego, że jest oznaczona jako "domyślna".

Użyteczny przypadek użycia, który lubię (i używam), pozwala na eksport anonimowej funkcji bez jawnie konieczności jej nazwy, i tylko wtedy, gdy ta funkcja jest importowana, musi być podana nazwa:

Przykład:

Eksportuj 2 funkcje, jedna to default:

export function divide( x ){
    return x / 2;
}

// only one 'default' function may be exported and the rest (above) must be named
export default function( x ){  // <---- declared as a default function
    return x * x;
}

Importuj powyższe funkcje. Wymyślanie nazwy dla default jedynki:

// The default function should be the first to import (and named whatever)
import square, {divide} from './module_1.js'; // I named the default "square" 

console.log( square(2), divide(2) ); // 4, 1

Kiedy składnia {} jest używana do importowania funkcji (lub zmiennej) oznacza to, że cokolwiek jest importowane, zostało już nazwane podczas eksportowania, więc trzeba zaimportować je przez dokładnie o tej samej nazwie, inaczej import nie zadziała.

Przykłady:

1. Domyślna funkcja musi być najpierw zaimportowana

   import {divide}, square from './module_1.js
   

2. divide_1 nie był eksportowany w module_1.js, więc nic nie będzie importowane

   import {divide_1} from './module_1.js
   

3. square nie został wyeksportowany w module_1.js, ponieważ {} nakazuje silnikowi jawne szukanie o nazwie tylko eksport.

   import {square} from './module_1.js
   

Mała uwaga: proszę wziąć pod uwagę, że podczas importu z domyślnego eksportu, nazewnictwo jest całkowicie niezależne. Ma to rzeczywiście wpływ na refaktoryzacje.

Powiedzmy, że masz klasę Foo taką jak ta z odpowiednim importem:

export default class Foo { }

// The name 'Foo' could be anything, since it's just an
// Identifier for the default export
import Foo from './Foo'

Teraz, jeśli zmienisz klasę Foo na Bar i zmienisz nazwę pliku, większość IDE nie dotknie twojego importu. Więc skończysz z tym:

export default class Bar { }

// The name 'Foo' could be anything, since it's just an
// Identifier for the default export.
import Foo from './Bar'

Szczególnie w maszynopisie, naprawdę doceniam eksport nazw i tym bardziej niezawodna refaktoryzacja. Różnica polega tylko na braku default słowa kluczowego i nawiasów klamrowych. To btw również uniemożliwia dokonanie literówki w imporcie, ponieważ masz teraz sprawdzanie typu.

export class Foo { }

//'Foo' needs to be the class name. The import will be refactored
//in case of a rename!
import { Foo } from './Foo'

From the documentation :

Nazwane eksportu są przydatne do eksportu kilku wartości. Podczas importu będzie można użyć tej samej nazwy, aby odnieść się do odpowiedniej wartości.

Jeśli chodzi o domyślny eksport, istnieje tylko jeden domyślny eksport na moduł. Domyślnym eksportem może być funkcja, Klasa, obiekt lub cokolwiek innego. Wartość tę należy traktować jako "główną" wartość eksportowaną, ponieważ będzie ona najprostsza do zaimportowania.

Gdy umieścisz default, nazywa się default export. Możesz mieć tylko jeden domyślny eksport na plik i możesz zaimportować go do innego pliku o dowolnej nazwie. Jeśli nie umieścisz domyślnego, nazwanego eksport, musisz zaimportować go do innego pliku o tej samej nazwie z klamrami w środku.

Miałem problem, że przeglądarka nie używa ES6 .

I have fix it with:

 <script type="module" src="index.js"></script>

Moduł Typ mówi przeglądarce, aby używała ES6.

export const bla = [1,2,3];

import {bla} from './example.js';