Was ist "Export Standard" in Javascript?

570

Datei: SafeString.js

// Build out our basic SafeString type
function SafeString(string) {
  this.string = string;
}

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

export default SafeString;

Ich habe noch nie gesehen export default. Gibt es gleichwertige Dinge export default, die leichter zu verstehen sind?

Damphat
quelle
29
Dies ist eine sehr klare Erklärung auf dieser 24ways.org/2014/javascript-modules-the-es6-way
nish1013
2
exportKeyword-Details hier . Derzeit ist es nicht nativ von einem der Web - Browsern unterstützt.
RBT
3
Es wird jetzt in allen Browsern außer IE unterstützt.
Brian Di Palma
1
Sehr gute Antwort stackoverflow.com/a/36426988/5473170
Suraj Jain
Siehe, schau oben nach Antworten; Schauen Sie unten nach Verwirrung. Ich habe u da wai gezeigt
Andrew

Antworten:

456

Es ist Teil des hier beschriebenen ES6-Modulsystems . In dieser Dokumentation finden Sie auch ein hilfreiches Beispiel:

Wenn ein Modul einen Standardexport definiert:

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

Anschließend können Sie diesen Standardexport importieren, indem Sie die geschweiften Klammern weglassen:

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

Update: Ab Juni 2015 ist das Modulsystem in §15.2 definiert und die exportSyntax insbesondere in §15.2.3 der ECMAScript 2015-Spezifikation.

pswg
quelle
1
@GeenHenk Ich nehme an, das ist zu erwarten, da ES6 noch ein Entwurf ist. Ich habe einen aktualisierten Link und einen Haftungsausschluss bereitgestellt.
Pswg
7
Ich sehe nicht, wie sich export default function () {} von export = function () {} unterscheidet ....
Alexander Mills
1
Was ist mit Fällen, in denen es so ist, export const Foo = () => {}und am Ende der Datei export default Foosehe ich dies in einer Reihe von Reaktionsbeispielen. Was ist mit den beiden Exporten?
FlavorScape
Es wäre schön, ein Beispiel mit Standard- und benannten Exporten zu sehen. Mit anderen Worten, ein solcher Export, der befriedigen würdeimport foo, { bar, baz } from './foo';
Gummis
1
Vielen Dank für die Antwort, aber die Verwendung von foo im zweiten Beispiel ist etwas mehrdeutig. Was ist foo und wie haben Sie die erste Datei benannt? Wie kommt es, dass du es tun kannst import foo from "foo"? Gab es ein Objekt, das foo enthielt, da Ihre exportierte Funktion im ersten Beispiel unbenannt ist. @pswg
nosahama
159

export default wird verwendet, um eine einzelne Klasse, Funktion oder ein Grundelement aus einer Skriptdatei zu exportieren.

Der Export kann auch als geschrieben werden

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

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

Dies wird verwendet, um diese Funktion in eine andere Skriptdatei zu importieren

Sagen Sie in app.js , Sie können

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

Ein wenig über den Export

Wie der Name schon sagt, werden damit Funktionen, Objekte, Klassen oder Ausdrücke aus Skriptdateien oder -modulen exportiert

Utiliites.js

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

Dies kann importiert und als verwendet werden

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 die Export-Standardeinstellung verwendet wird, ist dies viel einfacher. Skriptdateien exportieren nur eine Sache. cube.js

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

und als App.js verwendet

import Cube from 'cube';
console.log(Cube(3)); // 27
Sudo Bangbang
quelle
78

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 defaultausführlich sowie andere Details zu Modulen, die ich sehr hilfreich fand.

Greg Gum
quelle
14
Sie können Standard- und benannte Exporte zusammen verwenden, wenn Sie möchten.
Bergi
@ Greg gum die Seite ist veraltet. Es wird zu Exploringjs.com/es6/ch_modules.html
Rajakvk
@rajakvk, stimmt, aber die Originalseite enthält viel mehr Hintergrundinformationen für diejenigen, die anfangen möchten.
Greg Gum
7
Diese Antwort ist besser als eine akzeptierte, weil sie erklärt, was defaultbedeutet, und für mich ging es um dieses Wort.
Dariusz Sikorski
1
@DariuszSikorski Die akzeptierte Antwort erklärt, was defaultbedeutet, dass der Standardexport ohne geschweifte Klammern importiert werden kann. Diese Antwort ist eigentlich ziemlich falsch, da sie besagt, dass Sie sie nur verwenden können, defaultwenn eine Datei nur einen Export enthält, was überhaupt nicht zutrifft. Sie können mehrere Exporte in derselben Datei haben, aber natürlich kann nur einer davon als defaulteiner festgelegt werden.
RealUser404
42

Ich schreibe diesen Beitrag, weil ich (ich nehme an, ich bin müde) weder MDN noch die Beschreibung anderer Leute verstanden habe und der beste Weg, etwas zu verstehen, darin besteht, es anderen Leuten beizubringen. Ich sehe nur keine einfache Antwort auf die Frage.

Was ist "Export Standard" in Javascript?

Beim Standardexport ist die Benennung des Imports völlig unabhängig und wir können einen beliebigen Namen verwenden.

Ich werde diese Zeile anhand eines einfachen Beispiels veranschaulichen.

Nehmen wir an, wir haben 3 Module und eine index.html:

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

modul.js

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

export let variable = 123;

modul2.js

export function hello2() {
    console.log("Module2: Saying hello for the second time!");
}

export let variable2 = 456;

modul3.js

export default function hello3() {
    console.log("Module3: Saying hello for the third time!");
}

index.html

<script type="module">
import * as mod from './modul.js';
import {hello2, variable2} from './modul2.js';
import blabla from './modul3.js'; //! Here is the important stuff - we name the variable for the module as we like

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

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

blabla();
</script>

Die Ausgabe ist:

modul.js:2:10   -> Modul: Saying hello! 
index.html:7:9  -> Module: 123 
modul2.js:2:10  -> Module2: Saying hello for the second time! 
index.html:10:9 -> Module2: 456 
modul3.js:2:10  -> Module3: Saying hello for the third time!

Die längere Erklärung lautet also :

'Standard exportieren' wird verwendet, wenn Sie eine einzelne Sache für ein Modul exportieren möchten.

Wichtig ist also "import blabla from './modul3.js'" - wir könnten stattdessen sagen:

"importiere pamelanderson von './modul3.js" und dann pamelanderson (); Dies funktioniert einwandfrei, wenn wir 'Standard exportieren' verwenden, und im Grunde ist es das - es ermöglicht uns, es zu benennen, was immer wir wollen, wenn es Standard ist .


Ps Wenn Sie das Beispiel testen möchten - zuerst die Dateien erstellen, dann CORS im Browser zulassen -> wenn Sie Firefox verwenden, geben Sie die URL des Browsers ein: about: config -> Suchen Sie nach "privacy.file_unique_origin" -> change es auf "false" -> index.html öffnen -> F12 drücken, um die Konsole zu öffnen und die Ausgabe anzuzeigen -> Genießen Sie und vergessen Sie nicht, die Cors-Einstellungen auf die Standardeinstellungen zurückzusetzen.

Ps2 Entschuldigung für die dumme Benennung der Variablen

Weitere Informationen unter link2medium , link2mdn1 , link2mdn2

Kombinieren
quelle
4
Dies sollte als die beste Antwort akzeptiert werden, aber ich habe mit meiner Gegenstimme getan, was ich konnte.
Jarmos
1
Vielen Dank!
Kombinieren Sie den
1
Dies sollte die akzeptierte Antwort erhöhten Hände
nosahama
16

Wie dazu erklärt MDN-Seite

Es gibt zwei verschiedene Exportarten: Name 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. Während des Imports muss unbedingt derselbe Name des entsprechenden Objekts verwendet werden. Ein Standardexport kann jedoch mit einem beliebigen Namen importiert werden

Zum Beispiel:

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

import myExportedVar from './my-module' //  we have the freedom to use 'import myExportedVar' instead of 'import myVar' because myVar was defined as default export

console.log(myExportedVar);        // will log 123
manfall19
quelle
6

Meiner Meinung nach ist es wichtig , dass der Standardexport mit JEDEM Namen importiert werden kann!

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

export default function foo(){}

Es kann in bar.js importiert werden mit:

import bar from 'foo'
import Bar from 'foo' //or ANY other name you wish to assign to this import

Pauls Bebris
quelle
0

Es gibt zwei verschiedene Exportarten: Name und Standard . 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 { }

// import class
import { NamedExport1 } from 'path-to-file'
import { NamedExport2 } from 'path-to-file'

// OR you can import all at once
import * as namedExports from 'path-to-file'

Standardexport

export default class DefaultExport1 { }

// import class
import DefaultExport1 from 'path-to-file' // no curly braces {}

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

import Foo from 'path-to-file' // this will assign any default export to Foo.
Sieger
quelle
-3

Die Standardeinstellung export wird verwendet, um eine einzelne Klasse, Funktion oder ein Grundelement zu exportieren.

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

Weiterlesen

Viju
quelle