Javascript (ES6), Export konst vs Exportstandard

Question

I zu bestimmen versuche, ob es irgendwelche großen Unterschiede zwischen diesen 2, anders als in der Lage zu importieren mit export default von nur tun: export const

import myItem from 'myItem'; 

Und mit Ich kann:

import { myItem } from 'myItem'; 

Ich frage mich, ob es irgendwelche Unterschiede und/oder andere Anwendungsfälle gibt.

Answer 1

Es ist ein benannter Export gegen einen Standardexport. export const ist ein benannter Export mit dem Schlüsselwort const.

Standard Export (export default)

Sie können eine Standard-Export pro Datei. Wenn Sie importieren, müssen Sie einen Namen angeben und wie folgt importieren:

import MyDefaultExport from "./MyFileWithADefaultExport"; 

Sie können diesen beliebigen Namen geben, den Sie mögen.

Named Export (export)

Mit dem Namen Exporte, können Sie mehrere Namen Exporte pro Datei. Importieren Sie dann die spezifischen Exporte Sie in geschweiften Klammern werden sollen:

// 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 

Oder importieren Sie alle Namen Exporte auf ein Objekt:

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

Sie können einen Standardexport oder benannte Exporte oder beides gleichzeitig nutzen . Die Syntax favorisiert Standardexporte als etwas prägnanter, da ihr Anwendungsfall häufiger vorkommt (See the discussion here).

Beachten Sie, dass ein Standard-Export ist eigentlich ein benannter Export mit dem Namen default so Sie in der Lage sind, es zu importieren, indem Sie:

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

Answer 2

Von the documentation:

Named Exporte sind nützlich, mehrere Werte zu exportieren. Während des Imports kann man den gleichen Namen verwenden, um auf den entsprechenden Wert zu verweisen.

Beim Standard-Export gibt es nur einen Standard-Export pro Modul. Ein Standardexport kann eine Funktion, eine Klasse, ein Objekt oder irgendetwas anderes sein. Dieser Wert wird als der "exportierte Hauptwert" betrachtet, da er am einfachsten zu importieren ist.

Answer 3

Minor Anmerkung: Bitte beachten Sie, dass, wenn Sie von einem Standard-Export zu importieren, die Benennung ist völlig unabhängig. Dies hat Auswirkungen auf Refactorings.

Angenommen, Sie haben eine Klasse Foo wie dies mit einem entsprechenden Import:

export default class Foo { } 

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

Nun, wenn Sie Ihre Foo Klasse Refactoring Bar zu sein, und benennen Sie die Datei auch, werden die meisten IDEs NICHT Ihren Import berühren. So werden Sie sich mit diesem Zweck:

export default class Bar { } 

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

Besonders in Maschinenschrift, ich wirklich genannt Exporte und die zuverlässigere Refactoring zu schätzen wissen. Der Unterschied ist nur das Fehlen des Schlüsselworts default und der geschweiften Klammern. Dieser BTW verhindert auch, dass Sie einen Tippfehler in Ihrem Import machen, da Sie jetzt eine Typprüfung durchführen.

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

Wenn Sie Standard setzen, wird der Standardexport aufgerufen. Sie können nur einen Standard-Export pro Datei haben und ihn in eine andere Datei mit einem beliebigen Namen importieren. Wenn Sie den Standardnamen nicht angeben, müssen Sie ihn in eine andere Datei importieren, die denselben Namen mit geschweiften Klammern in sich trägt.