Exportoptionen für ES6 + Javascript-Module

82

Ich habe öffentliche Exporte von ES6-Modulen auf beide Arten gesehen:

// method 1
export var getAnswer = function () { return 'forty two'; };

// method 2
export default function () { return 'forty two'; };
  1. Sind beide gültig?
  2. Wenn ja, warum existieren beide?
  3. Gibt es andere gültige Optionen für Modulexporte mit ES6-Syntax?

Ich bin überrascht, dass ich mit meinem GoogleFU keine Antwort gefunden habe. Ich beschäftige mich nur mit ES6-Modulen, nicht mit CommonJS, RequireJS, AMD, Node usw.

kdbanman
quelle
2
Ich denke, der Unterschied ist import x from yvsimport {x} from y
elclanrs

Antworten:

179

Ein Jahr und einige später sind hier die besten Informationen, die ich zu diesem Thema gefunden habe.

Es gibt 4 Arten von Exporten. Hier sind jeweils Verwendungsbeispiele sowie einige Importe, die sie verwenden:

Syntax exportieren

// default exports
export default 42;
export default {};
export default [];
export default (1 + 2);
export default foo;
export default function () {}
export default class {}
export default function foo () {}
export default class foo {}

// variables exports
export var foo = 1;
export var foo = function () {};
export var bar;
export let foo = 2;
export let bar;
export const foo = 3;
export function foo () {}
export class foo {}

// named exports
export {};
export {foo};
export {foo, bar};
export {foo as bar};
export {foo as default};
export {foo as default, bar};

// exports from
export * from "foo";
export {} from "foo";
export {foo} from "foo";
export {foo, bar} from "foo";
export {foo as bar} from "foo";
export {foo as default} from "foo";
export {foo as default, bar} from "foo";
export {default} from "foo";
export {default as foo} from "foo";

Syntax importieren

// default imports
import foo from "foo";
import {default as foo} from "foo";

// named imports
import {} from "foo";
import {bar} from "foo";
import {bar, baz} from "foo";
import {bar as baz} from "foo";
import {bar as baz, xyz} from "foo";

// glob imports
import * as foo from "foo";

// mixing imports
import foo, {baz as xyz} from "foo";
import foo, * as bar from "foo";

// just import
import "foo";

Quelle.

kdbanman
quelle
9
Tolle Liste, aber können Sie erweitern, was jeder Typ tut und was die Unterschiede sind?
Dan Dascalescu
2
Das ist eine hervorragende Idee. Ich möchte mit jeder Erklärung umfassend sein, aber ich habe ES6 seit einiger Zeit nicht mehr berührt, daher bin ich ein wenig verrostet. Es muss warten, bis ich wieder im ES6-Land bin, damit ich sicher sein kann, wovon ich spreche.
Kdbanman
du bist der beste
zok
40

Beide sind gültig.

Methode 1 liefert benannte Exporte . Der Schlüssel hier ist, dass Sie mehr als eine Sache exportieren können. Dies sollte verwendet werden, anstatt ein Objekt mit mehreren Eigenschaften zu exportieren. Verwenden Sie beim Importieren eines Moduls mit benannten Exporten import {a, b} from c.

Methode 2 liefert den Standardexport . Es kann nur einen Standardexport geben. Dies wird hauptsächlich verwendet, wenn Sie eine einzelne Sache wie eine classoder eine einzelne exportieren function, von der Sie erwarten, dass sie ohne zusätzliche Unterstützung verwendet wird. Verwenden Sie beim Importieren eines Moduls mit einem Standardexport import d from c.

Beachten Sie, dass Sie beide verwenden können! Wenn Sie also eine wichtige primäre Funktion mit einer Handvoll gelegentlich verwendeter Helfer haben, können Sie exportdie Helfer und export defaultdie primäre. Wenn Sie ein Modul importieren und beide Arten von Exporten benötigen, verwenden Sie import d, {a, b} from c.

Eine andere Option ist, dass Sie benannte Exporte erhalten können, indem Sie sie am Ende Ihres Moduls auflisten, wie folgt : export {a,b,c}. Sie können sie auch umbenennen export {a as $a, b as c}.

All dies habe ich aus diesem Artikel erhalten , der die beste Quelle für aktuelle Informationen zum es6-Modul ist, die ich finden konnte.

Sean McMillan
quelle
3
  1. Sind beide gültig?

Nein, export function () { return answer; };ist ungültig. Entweder verwenden Sie die Standardeinstellung oder Sie fügen dieser Funktionsdeklaration einen Namen hinzu.

  1. Wenn ja, warum existieren beide?

Sie tun es nicht :)

  1. Gibt es andere gültige Optionen für Modulexporte mit ES6-Syntax?

Sie können viele gültige Optionen hier sehen: https://github.com/eslint/espree/pull/43

caridy
quelle