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

Es ist Teil des ES6-Modulsystems, hier beschrieben. In dieser Dokumentation gibt es auch ein hilfreiches Beispiel:

Wenn ein Modul einen Standardexport definiert:

// foo.js
export default function() { console.log("hello!") }

dann kannst du diesen Standardexport importieren, indem du die geschweiften Klammern weglässt:

import foo from "foo";
foo(); // hello!

---

Aktualisierung: Ab Juni 2015 ist das Modulsystem in §15.2 definiert und die export-Syntax im Besonderen in §15.2.3 der ECMAScript 2015 Spezifikation.

Answer 2

export default wird verwendet, um eine einzige Klasse, Funktion oder Primitiv aus einer Skriptdatei zu exportieren.

Der Export kann auch geschrieben werden als

export default function SafeString(string) {
  this.string = string;
}

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

Dies wird verwendet, um diese Funktion in einer anderen Skriptdatei zu importieren

Sagen wir in app.js, kannst du

import SafeString from './handlebars/safe-string';

Ein wenig über den Export

Wie der Name sagt, wird es verwendet, um Funktionen, Objekte, Klassen oder Ausdrücke aus Skriptdateien oder Modulen zu exportieren

Utiliites.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

Dies kann importiert und verwendet werden als

App.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

Oder

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

Wenn export default verwendet wird, ist dies viel einfacher. Skriptdateien exportieren einfach eine Sache. cube.js

export default function cube(x) {
  return x * x * x;
};

und verwendet als App.js

import Cube from 'cube';
console.log(Cube(3)); // 27

Answer 3

Was ist "export default" in JavaScript?

Im standardmäßigen Export ist die Benennung des Imports völlig unabhängig und wir können jeden Namen verwenden, den wir möchten.

Ich werde diese Zeile mit einem einfachen Beispiel veranschaulichen.

Angenommen, wir haben drei Module und eine index.html-Datei:

• modul.js
• modul2.js
• modul3.js
• index.html

Datei modul.js

export function hello() {
    console.log("Modul: Sag Hallo!");
}

export let variable = 123;

Datei modul2.js

export function hello2() {
    console.log("Modul2: Sag Hallo zum zweiten Mal!");
}

export let variable2 = 456;

modul3.js

export default function hello3() {
    console.log("Modul3: Sag Hallo zum dritten Mal!");
}

Datei index.html

import * as mod from './modul.js';
import {hello2, variable2} from './modul2.js';
import blabla from './modul3.js'; // ! Hier ist der wichtige Teil - wir benennen die Variable für das Modul wie wir möchten

mod.hello();
console.log("Modul: " + mod.variable);

hello2();
console.log("Modul2: " + variable2);

blabla();

Die Ausgabe ist:

modul.js:2:10   -> Modul: Sag Hallo!
index.html:7:9  -> Modul: 123
modul2.js:2:10  -> Modul2: Sag Hallo zum zweiten Mal!
index.html:10:9 -> Modul2: 456
modul3.js:2:10  -> Modul3: Sag Hallo zum dritten Mal!

---

Also die ausführlichere Erklärung ist:

'export default' wird verwendet, wenn Sie nur eine Sache für ein Modul exportieren möchten.

Also das Wichtige ist "import blabla from './modul3.js'" - wir könnten stattdessen sagen:

"import pamelanderson from './modul3.js" und dann pamelanderson();. Dies funktioniert genauso gut, wenn wir 'export default' verwenden und im Grunde genommen erlaubt es uns, es zu benennen, wie wir möchten, wenn es standardmäßig ist.

---

P.S.: Wenn Sie das Beispiel testen möchten - erstellen Sie zuerst die Dateien und erlauben Sie dann CORS im Browser -> wenn Sie Firefox verwenden, geben Sie in die URL des Browsers ein: about:config -> Suchen Sie nach "privacy.file_unique_origin" -> ändern Sie es auf "false" -> öffnen Sie index.html -> drücken Sie F12, um die Konsole zu öffnen und die Ausgabe zu sehen -> Viel Spaß und vergessen Sie nicht, die Datenschutzeinstellungen für CORS auf die Standardeinstellungen zurückzusetzen.

P.S.2: Entschuldigen Sie die seltsame Variablenbenennung

Weitere Informationen finden Sie unter link2medium und link2mdn.

Answer 4

export default function(){} kann verwendet werden, wenn die Funktion keinen Namen hat. Es kann nur einen Standardexport in einer Datei geben. Die Alternative ist ein benannter Export.

Diese Seite beschreibt export default im Detail sowie andere Details zu Modulen, die ich sehr hilfreich fand.

Answer 5

Wie auf dieser MDN-Seite erläutert

Es gibt zwei verschiedene Arten des Exports, benannt und Standard. Sie können mehrere benannte Exporte pro Modul haben, aber nur einen Standardexport [...] Benannte Exporte sind nützlich, um mehrere Werte zu exportieren. Beim Importieren ist es obligatorisch, den gleichen Namen des entsprechenden Objekts zu verwenden. Aber ein Standardexport kann mit einem beliebigen Namen importiert werden

Zum Beispiel:

let myVar; export default myVar = 123; // in der Datei my-module.js

import myExportedVar from './my-module' // wir haben die Freiheit, 'import myExportedVar' anstelle von 'import myVar' zu verwenden, weil myVar als Standardexport definiert wurde

console.log(myExportedVar);        // gibt 123 aus