ES6 + javascriptモジュールのエクスポートオプション


82

ES6モジュールのパブリックエクスポートが次の両方の方法で行われるのを見てきました。

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

// method 2
export default function () { return 'forty two'; };
  1. これらは両方とも有効ですか?
  2. もしそうなら、なぜそれらは両方とも存在するのですか?
  3. ES6構文を使用したモジュールエクスポートに有効なオプションは他にありますか?

googlefuで答えが見つからなかったのには驚きました。CommonJS、RequireJS、AMD、Nodeなどでなく、ES6モジュールのみに関心があります。


2
違いはimport x from yvsだと思いますimport {x} from y
elclanrs 2014

回答:


180

1年後、この件に関して私が見つけた最高の情報がここにあります。

輸出には4種類あります。それぞれの使用例と、それらを使用するいくつかのインポートを次に示します。

エクスポート構文

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

インポート構文

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

ソース。


9
すばらしいリストですが、それぞれのタイプの機能と違いについて詳しく説明していただけますか?
ダンダスカレスク2016年

2
それは素晴らしいアイデアです。それぞれの説明を包括的にしたいのですが、しばらくES6に触れていないので少し錆びています。ES6の土地に戻るまで待たなければならないので、私が話していることを確信できます。
kdbanman 2016年

あなたは最高です
zok 2017年

40

これらは両方とも有効です。

方法1は、名前付きエクスポートを提供します。ここで重要なのは、複数のものをエクスポートできることです。これは、複数のプロパティを持つオブジェクトをエクスポートする代わりに使用する必要があります。名前付きエクスポートを使用してモジュールをインポートする場合は、を使用しますimport {a, b} from c

方法2は、デフォルトのエクスポートを提供します。デフォルトのエクスポートは1つだけです。これは主に、などの単一のものclass、またはfunction追加のサポートなしで使用されることが予想される単一のものをエクスポートする場合に使用されます。デフォルトのエクスポートでモジュールをインポートするときは、を使用しますimport d from c

両方を使用できることに注意してください!そのため、たまに使用されるヘルパーがいくつかある主要なプライマリ機能がある場合はexport、ヘルパーとexport defaultプライマリを使用できます。モジュールをインポートし、両方の種類のエクスポートが必要な場合は、を使用しますimport d, {a, b} from c

もう1つのオプションは、次のように、モジュールの最後に名前付きエクスポートをリストすることで取得できることですexport {a,b,c}。名前を変更することもできますexport {a as $a, b as c}

私はこの記事からこれらすべてを入手しました。これは、私が見つけた最新のes6モジュール情報の最良の情報源です。


3
  1. これらは両方とも有効ですか?

いいえ、export function () { return answer; };無効です。デフォルトを使用するか、その関数宣言に名前を追加してください。

  1. もしそうなら、なぜそれらは両方とも存在するのですか?

彼らはしません:)

  1. ES6構文を使用したモジュールエクスポートに有効なオプションは他にありますか?

ここで多くの有効なオプションを見ることができます:https//github.com/eslint/espree/pull/43

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.