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答案。我关心ES6模块,而不关心CommonJS,RequireJS,AMD,Node等。


2
我认为区别在于import x from yvsimport {x} from y
Elclanrs

Answers:


180

一年以后,这是我找到的关于该主题的最佳信息。

出口有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
很棒的清单,但是您可以扩展每种类型的作用以及区别是什么吗?
Dan Dascalescu '16

2
那是个好主意。我希望对每种解释都比较全面,但是我已经有一段时间没有接触ES6了,所以我有点生锈。它必须等到我回到ES6领域后,才能确定我在说什么。
kdbanman '16

你是最好的
-zok

40

这两个都是有效的。

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

方法2提供了默认导出。默认只能有一个导出。主要用于导出单个项目(例如class)或function要在没有任何其他支持的情况下使用的单个项目。使用默认导出导入模块时,请使用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模块信息的最佳来源。


3
  1. 这些都有效吗?

否,export function () { return answer; };无效,或者您使用默认值,或者在该函数声明中添加名称。

  1. 如果是这样,为什么它们都存在?

他们不:)

  1. 使用ES6语法进行模块导出是否还有其他有效选项?

您可以在此处看到很多有效的选项:https : //github.com/eslint/espree/pull/43

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.