Opcje eksportu modułu ES6 + javascript


82

Widziałem publiczne eksportowanie modułów ES6 na oba poniższe sposoby:

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

// method 2
export default function () { return 'forty two'; };
  1. Czy oba są ważne?
  2. Jeśli tak, dlaczego obie istnieją?
  3. Czy istnieją inne prawidłowe opcje eksportu modułów przy użyciu składni ES6?

Dziwię się, że nie udało mi się znaleźć odpowiedzi na moim googlefu. Zajmuję się tylko modułami ES6, a nie CommonJS, RequireJS, AMD, Node itp.


2
Myślę, że różnica jest import x from yvsimport {x} from y
elclanrs

Odpowiedzi:


180

Rok i trochę później, oto najlepsze informacje, jakie znalazłem na ten temat.

Istnieją 4 rodzaje eksportu. Oto przykłady użycia każdego z nich wraz z niektórymi importami, które z nich korzystają:

Eksportuj składnię

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

Importuj składnię

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

Źródło.


9
Świetna lista, ale czy możesz rozszerzyć, co robi każdy typ i jakie są różnice?
Dan Dascalescu

2
To doskonały pomysł. Chcę być wyczerpujący w każdym wyjaśnieniu, ale od jakiegoś czasu nie dotykałem ES6, więc jestem trochę zardzewiały. Będzie musiał poczekać, aż wrócę do krainy ES6, abym mógł być pewien, o czym mówię.
kdbanman

jesteście najlepsi
zok

40

Oba są ważne.

Metoda 1 zapewnia nazwane eksporty . Najważniejsze jest to, że możesz wyeksportować więcej niż jedną rzecz. Powinno to być używane zamiast eksportowania obiektu z wieloma właściwościami. Podczas importowania modułu z nazwanymi eksportami użyj import {a, b} from c.

Metoda 2 zapewnia domyślny eksport . Może istnieć tylko jeden domyślny eksport. Jest to używane głównie, gdy eksportujesz jedną rzecz, taką jak a class, lub jedną function, której spodziewasz się użyć bez dodatkowego wsparcia. Podczas importowania modułu z domyślnym eksportem użyj import d from c.

Pamiętaj, że możesz używać obu! więc jeśli masz główną, podstawową funkcję z kilkoma okazjonalnie używanymi pomocnikami, możesz to zrobić exportjako pomocnicy i export defaultpodstawowa. Kiedy importujesz moduł i potrzebujesz obu rodzajów eksportu, użyj import d, {a, b} from c.

Jedna inna opcja jest taka, że można uzyskać nazwie eksportu wymieniając je na końcu modułu, tak: export {a,b,c}. Możesz także zmienić ich nazwy export {a as $a, b as c}.

Wszystko to znalazłem w tym artykule , który jest najlepszym źródłem aktualnych informacji o module es6, jakie udało mi się znaleźć.


3
  1. Czy oba są ważne?

Nie, export function () { return answer; };jest nieprawidłowy, albo używasz wartości domyślnej, albo dodajesz nazwę do tej deklaracji funkcji.

  1. Jeśli tak, dlaczego obie istnieją?

Nie robią :)

  1. Czy istnieją inne prawidłowe opcje eksportu modułów przy użyciu składni ES6?

Możesz zobaczyć wiele ważnych opcji tutaj: https://github.com/eslint/espree/pull/43

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.