ES6+ JavaScript模块导出选项

Question

我看到过ES6模块的公共导出以以下两种方式之一完成：

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

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

1. 这两个都是有效的吗？
2. 如果是，为什么它们都存在？
3. 是否有其他使用ES6语法导出模块的有效选项？

我很惊讶我在谷歌上找不到答案。 我只关心ES6模块，而不是CommonJS，RequireJS，AMD，Node等。

- kdbanman

---

我认为区别在于 import x from y 和 import {x} from y。 - elclanrs

请参阅何时应使用ES6导入的花括号？和export const vs export default。 - Bergi

Answer 1

一年后，我找到了关于这个主题最好的信息。

有四种类型的导出。以下是每种类型的使用示例以及使用它们的一些导入内容：

导出语法

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

源代码。

- kdbanman

---

好的，以下是每种类型的功能和区别的扩展说明： - Dan Dascalescu

这是一个很棒的想法。我希望每个解释都能全面，但我已经有一段时间没有接触ES6了，所以我有点生疏。等我回到ES6领域，我才能确信自己在说什么。 - kdbanman

Answer 2

这两种方法都是有效的。

方法1提供了命名导出。关键在于您可以导出多个内容。应该使用此方法，而不是导出具有多个属性的对象。当您使用命名导出方式导入模块时，请使用import {a, b} from c。

方法2提供了默认导出。只能有一个默认导出。主要用于导出单个内容，例如类或单个函数，预计不需要任何额外的支持即可使用。当您使用默认导出方式导入模块时，请使用import d from c。

请注意，您可以同时使用两者！因此，如果您有一个包含少量偶尔使用的辅助函数的主要函数，您可以将export应用于辅助函数，并将export default应用于主要函数。当您导入模块并需要这两种类型的输出时，请使用import d, {a, b} from c。

另一个选项是通过在模块末尾列出它们来获取命名导出，如下所示：export {a,b,c}。您还可以重命名它们，export {a as $a, b as c}。

我从这篇文章中获取了所有这些信息，这是我能找到的最好的关于最新es6模块信息的来源。

- Sean McMillan

Answer 3

1. 这两个都有效吗？

不，export function () { return answer; };是无效的，你要么使用默认值，要么为该函数声明添加一个名称。

2. 如果是的话，它们为什么都存在？

它们不存在 :)

3. 在 ES6 语法中，有其他合法的模块导出选项吗？

你可以在这里看到很多有效的选项：https://github.com/eslint/espree/pull/43

- caridy