ES6 + JavaScript模块导出选项

我已经看到公共出口的ES6模块在以下两个方面完成：

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

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

我很惊讶，我一直无法find我的googlefu答案。 我只关心ES6模块， 而不是 CommonJS，RequireJS，AMD，Node等。

Answer 1

一年以后，这是我在这个问题上find的最好的信息。

有4种types的出口。 以下是每个示例的使用示例以及一些使用它们的导入：

导出语法

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

资源。

Answer 2

这两个都是有效的。

方法1提供了命名导出 。 这里的关键是你可以导出多个东西。 这应该用来代替导出具有多个属性的对象。 当您导入具有命名导出的模块时，请使用import {a, b} from c 。

方法2提供了默认导出 。 只能有一个默认导出。 这主要用于导出一个单一的东西，比如一个class ，或者一个你希望在没有任何额外支持的情况下使用的单个function 。 当您使用默认导出导入模块时，请使用import d from c 。

请注意，您可以同时使用！ 所以如果你有一个主要的function，偶尔使用一些助手，你可以export助手，并export default的主。 当您导入模块并需要两种导出时，请使用import d, {a, b} from c 。

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

我从这篇文章中得到了所有这些信息 ，这是我能够find的最新的es6模块信息的最佳来源。

Answer 3

1. 这两个都有效吗？

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

2. 如果是这样，为什么他们都存在？

他们不:)

3. 有没有其他有效的select模块出口使用ES6语法？

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