wake-up-neo.net

Javascript (ES6), Exportkonstante vs. Exportvorgabe

Ich versuche herauszufinden, ob es große Unterschiede zwischen diesen beiden gibt, abgesehen davon, dass Sie mit export default importieren können, indem Sie einfach Folgendes tun:

import myItem from 'myItem';

Und mit export const kann ich:

import { myItem } from 'myItem';

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

142
ajmajmajma

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

Standardexport (export default)

Sie können einen Standardexport pro Datei erstellen. Beim Import müssen Sie einen Namen angeben und wie folgt importieren:

import MyDefaultExport from "./MyFileWithADefaultExport";

Sie können diesen Namen beliebig vergeben.

Benannter Export (export)

Mit benannten Exporten können Sie mehrere benannte Exporte pro Datei haben. Importieren Sie dann die gewünschten Exporte in geschweiften Klammern:

// 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 genannten Exporte in ein Objekt:

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

Sie können einen Standardexport oder einen benannten Export oder beide gleichzeitig verwenden. Die Syntax bevorzugt Standardexporte als etwas prägnanter, da ihr Anwendungsfall häufiger ist ( Siehe die Diskussion hier ).

Beachten Sie, dass ein Standardexport tatsächlich ein benannter Export mit dem Namen default ist, sodass Sie ihn importieren können, indem Sie Folgendes tun:

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

export default beeinflusst die Art und Weise der import-Syntax, die beim Importieren eines Moduls verwendet werden soll.

Ein nützlicher Anwendungsfall, den ich mag (und benutze), ist das Exportieren einer anonymous - Funktion, ohne dass explizit benannt werden muss, und nur wenn diese Funktion importiert wird, muss ihnen ein gegeben werden Name:


Beispiel:

modul 1

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

module_2

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

Wenn die {}-Syntax zum Importieren einer Funktion (oder Variable) verwendet wird, bedeutet dies, dass beim Importieren bereits beim Exportieren benannt wurde. Daher muss man sie mit dem gleichen Namen exact importieren Importieren würde nicht funktionieren.


Fehlerhafte Beispiele:

  1. Die Standardfunktion muss zuerst importiert werden

    import {divide}, square from './module_1.js
    
  2. divide_1 wurde nicht in module_1.js exportiert, daher wird nichts importiert

    import {divide_1} from './module_1.js
    
  3. square wurde nicht in module_1.js exportiert, da {} die Engine anweist, explizit nur nach named - Exporten zu suchen.

    import {square} from './module_1.js
    
9
vsync

Kleiner Hinweis: Bitte beachten Sie, dass die Benennung beim Import aus einem Standardexport völlig unabhängig ist. Dies hat tatsächlich Auswirkungen auf Refactorings.

Nehmen wir an, Sie haben eine Klasse Foo 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'

Wenn Sie nun Ihre Foo-Klasse in Bar umwandeln und die Datei umbenennen, berühren die meisten IDEs Ihren Import NICHT. So wirst du damit enden:

export default class Bar { }

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

Ich schätze vor allem in TypeScript die benannten Exporte und das zuverlässigere Refactoring. Der Unterschied ist nur das Fehlen des Schlüsselworts default und der geschweiften Klammern. Dieses Übrigens verhindert auch, dass Sie beim Import einen Tippfehler machen, da Sie jetzt eine Überprüfung des Typs vorgenommen haben.

export class Foo { }

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

Aus der Dokumentation :

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

Beim Standardexport gibt es nur einen Standardexport pro Modul. Ein Standardexport kann eine Funktion, eine Klasse, ein Objekt oder etwas anderes sein. Dieser Wert wird als "hauptsächlich" exportierter Wert betrachtet, da er am einfachsten importiert werden kann.

5
James Sumners

Ich hatte das Problem, dass der Browser es6 nicht verwendet.

Ich habe es behoben mit:

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

Das Typmodul weist den Browser an, ES6 zu verwenden.

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

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

Dann sollte es klappen.

0

Wenn Sie default setzen, wird es als Standardexport bezeichnet. Sie können nur einen Standardexport pro Datei haben und ihn in eine andere Datei mit einem beliebigen Namen importieren. Wenn Sie default nicht setzen, heißt es Export genannt, müssen Sie es in eine andere Datei mit demselben Namen und geschweiften Klammern importieren.

0
Abdullah Danyal