Próbuję ustalić, czy istnieją między nimi duże różnice, poza tym, że mogę je importować, export defaultwykonując po prostu:

import myItem from 'myItem';

I używając export constmogę zrobić:

import { myItem } from 'myItem';

Zastanawiam się, czy istnieją jakieś różnice i / lub przypadki użycia inne niż to.

Jest to eksport nazwany a domyślny eksport. export constto nazwany eksport, który eksportuje stałą deklarację lub deklaracje.

Aby podkreślić: ważne jest tutaj exportsłowo kluczowe constużywane do deklarowania stałej deklaracji lub deklaracji. exportmogą być również stosowane do innych deklaracji, takich jak deklaracje klas lub funkcji.

Domyślny eksport ( export default)

Możesz mieć jeden domyślny eksport na plik. Podczas importowania musisz podać nazwę i zaimportować w następujący sposób:

import MyDefaultExport from "./MyFileWithADefaultExport";

Możesz nadać temu dowolne imię.

Nazwany eksport ( export)

Dzięki nazwanym eksportom możesz mieć wiele nazwanych eksportów na plik. Następnie zaimportuj określony eksport w nawiasach klamrowych:

// ex. importing multiple exports:
import { MyClass, MyOtherClass } from "./MyClass";
// ex. giving a named import a different name by using "as":
import { MyClass2 as MyClass2Alias } from "./MyClass2";

// use MyClass, MyOtherClass, and MyClass2Alias here

Lub można użyć wartości domyślnej wraz z nazwanymi importami w tym samym zestawieniu:

import MyDefaultExport, { MyClass, MyOtherClass} from "./MyClass";

Import przestrzeni nazw

Możliwe jest również zaimportowanie wszystkiego z pliku na obiekt:

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass, MyClasses.MyOtherClass and MyClasses.default here

Notatki

• Składnia preferuje domyślny eksport jako nieco bardziej zwięzły, ponieważ ich przypadek użycia jest częstszy ( zobacz dyskusję tutaj ).

• Domyślny eksport to tak zwany eksport o nazwie, defaultdzięki czemu można go zaimportować za pomocą importu o nazwie:

  import { default as MyDefaultExport } from "./MyFileWithADefaultExport";

export defaultwpływa na składnię podczas importowania eksportowanej „rzeczy”, podczas zezwalania na importowanie wszystkiego, co zostało wyeksportowane, poprzez wybranie samej nazwy import, bez względu na to, jaka była nazwa podczas eksportowania, po prostu dlatego, że jest oznaczona jako „domyślna”.

Przydatnym przypadkiem użycia, który lubię (i używam), jest możliwość wyeksportowania anonimowej funkcji bez wyraźnego nadawania jej nazwy, a tylko po zaimportowaniu tej funkcji należy nadać jej nazwę:

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;
}

Zaimportuj powyższe funkcje. Wymyślając nazwę dla tego default:

// 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 wszystko, co jest importowane, było już nazwane podczas eksportowania, więc należy zaimportować je pod dokładnie taką samą nazwą, w przeciwnym razie import nie zadziała.

Błędne przykłady:

1. Domyślna funkcja musi być najpierw importowana

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

2. divide_1nie został wyeksportowany module_1.js, więc nic nie zostanie zaimportowane

   import {divide_1} from './module_1.js

3. squarenie został wyeksportowany module_1.js, ponieważ {}nakazuje silnikowi jawne wyszukiwanie tylko nazwanych eksportów.

   import {square} from './module_1.js

Drobna uwaga: pamiętaj, że podczas importowania z domyślnego eksportu nazewnictwo jest całkowicie niezależne. Ma to faktycznie wpływ na refaktoryzację.

Załóżmy, że masz taką klasę Fooz 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 Fooklasę na swoją, Bara także zmienisz nazwę pliku, większość IDE NIE dotknie twojego importu. 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 nazwany eksport i bardziej niezawodne refaktoryzowanie. Różnica polega tylko na braku defaultsłowa kluczowego i nawiasów klamrowych. To również zapobiega tworzeniu literówki w imporcie, ponieważ teraz masz sprawdzanie typów.

export class Foo { }

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

Z dokumentacji :

Nazwane eksporty są przydatne do eksportowania kilku wartości. Podczas importu będzie można użyć tej samej nazwy w celu odniesienia do odpowiedniej wartości.

W przypadku domyślnego eksportu 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ść eksportu, ponieważ będzie ona najłatwiejsza do zaimportowania.

Po ustawieniu domyślnym nazywany jest domyślnym eksportem. Możesz mieć tylko jeden domyślny eksport na plik i możesz go zaimportować do innego pliku o dowolnej nazwie. Jeśli nie ustawisz wartości domyślnej, nazywanej eksportem, musisz zaimportować ją do innego pliku, używając tej samej nazwy z nawiasami klamrowymi w środku.

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

Naprawiłem to za pomocą:

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

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

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

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

To powinno działać.