Was bedeutet "export default" in JavaScript?

Question

Datei: SafeString.js

// Erstellen Sie unseren grundlegenden SafeString-Typ
function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

export default SafeString;

Ich habe export default noch nie gesehen. Gibt es äquivalente Dinge für export default die leichter zu verstehen sein könnten?

Answer 1

Eines der guten Features, die in ES6 eingeführt wurden, waren Javascript-Module auf effiziente Weise, durch die wir Variablen, Funktionen und Klassen zwischen verschiedenen .js-Dateien exportieren und importieren können.

Es gibt zwei verschiedene Möglichkeiten zum Exportieren: Named Exports und Default Exports. Um den Default Export richtig zu verstehen, müssen wir zunächst den Named Export gut verstehen.

Named Export

In diesem Fall exportieren wir in der source-Datei die gewünschten Variablen, Funktionen oder Klassen mit einem bestimmten Namen. Die Syntax lautet wie folgt:

// Datei: source.js
export const myVariable = /* … */
export function myFunction() { /* … */ }
export class myClass { /* … */ }

Um nun auf die obigen Elemente in der target-Datei zugreifen zu können, müssen wir sie wie folgt importieren:

// Datei: target.js (im selben Verzeichnis wie die source.js-Datei)
import { myVariable } from "./source.js"
import { myFunction } from "./source.js"
import { myClass } from "./source.js"

Jetzt ist es an der Zeit, zur Hauptfrage zu kommen: "Was ist genau der Default Export"?

Default Export

Abgesehen von den Fällen, in denen wir sie nach Namen exportiert haben (Named Exports), gibt es eine ähnliche Funktion namens Default Export, die nur einmal in jeder .js-Datei verwendet werden kann. Sehen wir uns das folgende Beispiel an und vergleichen es mit der vorherigen source.js-Datei:

// Datei: source.js
export default function myNewFunction() { /* … */ }
export const myVariable = /* … */
export function myFunction() { /* … */ }
export class myClass { /* … */ }

Tatsächlich kann jede .js-Datei "mehrere Named Exports" und "nur einen Default Export" enthalten - hier wird myNewFunction als default exportiert. Beim Importieren in der target-Datei erkennt Javascript somit, welches Element als default exportiert ist.

Das Element, das als "Default" exportiert wird (myNewFunction), wird in der target.js-Datei wie folgt importiert:

// Datei: target.js (im selben Verzeichnis wie die source.js-Datei)
import anyName from "./source.js"

Schau dir die Unterschiede genau an! Hier haben wir kein { }-Zeichen nach import, und wir haben einen benutzerdefinierten Namen verwendet, den wir nicht in der source-Datei hatten. Hier repräsentiert anyName myNewFunction.

Dies zeigt, dass wir dem Element, das als "Default" exportiert wird, "einen beliebigen gewünschten Namen" geben können, wenn wir es importieren und einfach auf den "Pfad" der source-Datei zeigen, wird JavaScript diese Datei finden und importieren.

Einige wichtige Hinweise:

• Im Gegensatz zu Named Exports müssen wir bei Default Export keine benannten Elemente exportieren und können auch "namenlose" Elemente exportieren.

• Warum haben sie überhaupt das Default Export-Feature zu ES6 hinzugefügt? Für die Möglichkeit, "namenlose Elemente" (anonyme Funktionen und Klassen) sowie Ausdrücke und sogar Objektliterale neben benannten Elementen zu exportieren.

Answer 2

Es gibt zwei verschiedene Arten von Exporten, benannt und standardmäßig. Sie können mehrere benannte Exporte pro Modul haben, aber nur einen Standardexport. Jeder Typ entspricht einem der oben genannten. Quelle: MDN

Benannter Export

export class NamedExport1 { }

export class NamedExport2 { }

// Klasse importieren
import { NamedExport1 } from 'pfad-zur-datei'
import { NamedExport2 } from 'pfad-zur-datei'}

// ODER Sie können alles auf einmal importieren
import * as namedExports from 'pfad-zur-datei'

Standardexport

export default class DefaultExport1 { }

// Klasse importieren
import DefaultExport1 from 'pfad-zur-datei' // Keine geschweiften Klammern - {}

// Sie können einen anderen Namen für den Standardimport verwenden

import Foo from 'pfad-zur-datei' // Dies weist jeden Standardexport Foo zu.

Answer 3

Nach meiner Meinung ist das wichtige am Standardexport, dass er mit jedem beliebigen Namen importiert werden kann!

Wenn es eine Datei namens foo.js gibt, die standardmäßig exportiert:

export default function foo(){}

kann sie in bar.js importiert werden mit:

import bar from 'foo'
import Bar from 'foo' // Oder JEDEN anderen Namen, den du diesem Import zuweisen möchtest

Answer 4

Drei verschiedene Exportstile

export foo;
export default foo;
export = foo;

Die drei passenden Importstile

import {foo} from 'blah';
import foo from 'blah';
* as foo from 'blah';

Answer 5

Export Default wird verwendet, um nur einen Wert aus einer Datei zu exportieren, der eine Klasse, Funktion oder Objekt sein kann. Der Standardexport kann mit beliebigem Namen importiert werden.

//file functions.js

export default function subtract(x, y) {
  return x - y;
}

//importieren von subtract in einer anderen Datei im selben Verzeichnis
import myDefault from "./functions.js";

Die subtract-Funktion kann in der importierten Datei als myDefault bezeichnet werden.

Export Default erstellt auch einen Fallback-Wert, was bedeutet, dass, wenn versucht wird, eine Funktion, Klasse oder Objekt zu importieren, das in den benannten Exporten nicht vorhanden ist, der vom Standardexport bereitgestellte Fallback-Wert verwendet wird.

Eine ausführliche Erklärung finden Sie unter https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export