1. ホーム
  2. javascript

[解決済み] ES6+ javascriptモジュールエクスポートオプション

2023-06-14 08:16:15

質問

ES6モジュールのパブリックエクスポートは、以下の両方の方法で行われているのを見たことがあります。

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

// method 2
export default function () { return 'forty two'; };

  1. どちらも有効ですか?
  2. もしそうなら、なぜ両方が存在するのでしょうか?
  3. ES6 構文を使用したモジュールエクスポートのための他の有効なオプションはありますか?

googlefuで答えが見つからなかったので驚いています。 私が心配しているのは だけ ES6 モジュールについてです。 ではなく CommonJS、RequireJS、AMD、Nodeなど。

どのように解決するのですか?

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

ソース