Javascript (ES6), eksport const vs domyślnie eksportu

Question

Próbuję ustalić, czy istnieją jakieś duże różnice pomiędzy tymi 2, innego niż jest w stanie importować z export default po prostu robi:

import myItem from 'myItem'; 

i korzystania export const Mogę zrobić:

import { myItem } from 'myItem'; 

Zastanawiam się, czy są jakieś różnice i/lub przypadków użycia innych niż to.

Answer 1

Jest to eksport nazwany kontra eksport domyślny. export const to nazwany eksport ze słowem kluczowym const.

Domyślnie Export (export default)

Możesz mieć jeden domyślny eksportu per pliku. Podczas importowania musisz podać nazwę i zaimportować w ten sposób:

import MyDefaultExport from "./MyFileWithADefaultExport"; 

Możesz nadać to dowolne imię.

Nazwany Export (export)

Z wymienionych eksportu, można mieć wiele nazwanych eksportu na plik. Następnie zaimportować konkretnych eksportu, które mają być otoczone w nawiasach:

// 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 importować wszystkie nazwanych eksportu na obiekt:

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

Można użyć wywozu domyślne lub nazwane eksportu lub obu jednocześnie . Składnia preferuje eksport domyślny jako nieco bardziej zwięzły, ponieważ ich przypadek użycia jest bardziej powszechny (See the discussion here).

Zauważ, że domyślny eksport jest właściwie nazwany eksport z nazwą default, dzięki czemu są w stanie importować je wykonując:

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

Answer 2

Od the documentation:

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

W przypadku eksportu domyślnego istnieje tylko jeden domyślny eksport na moduł. Eksport domyślny może być funkcją, klasą, obiektem lub cokolwiek innego. Wartość tę należy traktować jako "główną" wartość eksportowaną, ponieważ będzie ona najprostsza do zaimportowania.

Answer 3

Minor Uwaga: Proszę zwrócić uwagę, że podczas importowania z domyślnego wywozu, nazywanie jest całkowicie niezależne. To faktycznie ma wpływ na refaktoryzacje.

Powiedzmy, że masz klasę Foo jak to z odpowiednim importu:

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 byłaby klasa Foo być Bar a także zmienić nazwę pliku, większość IDE nie dotknie swój import. 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 maszynie do pisania, naprawdę doceniam nazwę eksportu i bardziej wiarygodny refaktoryzacji. Różnica polega jedynie na braku słowa kluczowego default i nawiasów klamrowych. To btw zapobiega również tworzeniu 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' 

Answer 4

Po wprowadzeniu wartości domyślnej wywoływany jest domyślny eksport. Możesz mieć tylko jeden domyślny eksport na plik i możesz go zaimportować do innego pliku o dowolnej nazwie. Jeśli nie dodasz domyślnego, nazywanego nazwanym eksportem, musisz zaimportować go do innego pliku o tej samej nazwie z nawiasami klamrowymi.