ES6+ javascript module导出选项

IT技术 javascript syntax module export ecmascript-6
2021-02-22 03:42:56

我已经看到 ES6 module的公共导出以以下两种方式完成:

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

// method 2
export default function () { return 'forty two'; };
  1. 这两个都有效吗?
  2. 如果是这样,为什么它们都存在?
  3. 使用 ES6 语法进行module导出是否还有其他有效选项?

我很惊讶我无法用我的 googlefu 找到答案。关心ES6 module,而不关心CommonJS、RequireJS、AMD、Node 等。

3个回答

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

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

来源。

这是个好主意。我想对每一个解释都全面,但我有一段时间没有接触 ES6,所以我有点生疏。它必须等到我回到 ES6 领域,这样我才能确定我在说什么。
2021-04-16 03:42:56
很棒的清单,但是您能否详细说明每种类型的作用以及区别是什么?
2021-05-13 03:42:56

这两个都是有效的。

方法 1 提供命名导出这里的关键是您可以导出不止一件事。这应该用于而不是导出具有多个属性的对象。导入具有命名导出的module时,请使用import {a, b} from c.

方法 2 提供默认导出只能有一个默认导出。这主要用于导出单个事物,例如 aclassfunction希望在没有任何额外支持的情况下使用的单个事物当您使用默认导出导入module时,请使用import d from c.

请注意,您可以同时使用两者!因此,如果您有一个主要的、主要的功能以及一些偶尔使用的助手,那么您可以export使用助手和export default主要功能。当您导入一个module并需要两种导出时,请使用import d, {a, b} from c.

另一种选择是,你可以得到命名为您的module的末尾列出它们的出口,就像这样:export {a,b,c}您也可以重命名它们export {a as $a, b as c}

我从这篇文章中获得了所有这些,这是我能够找到的最新 es6 module信息的最佳来源。

  1. 这两个都有效吗?

不,export function () { return answer; };无效,要么使用默认值,要么向该函数声明添加名称。

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

他们没有:)

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

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