blocks|key|2731205|text|这两个都是有效的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2731206|方法1提供了名为exports的。这里的关键是您可以导出多个内容。应该使用这种方法，而不是导出具有多个属性的对象。当您导入具有命名导出的模块时，请使用import+{a,+b}+from+c。|offset|length|style|BOLD|CODE|2731207|方法2为提供默认的导出。只能有一个默认导出。这主要是在导出单个对象时使用的，例如class，或者您希望在没有任何额外支持的情况下使用的单个function。当您使用默认导出导入模块时，请使用import+d+from+c。|2731208|请注意，您可以同时使用这两种方法！因此，如果你有一个主要的、主要的函数，其中有几个偶尔使用的助手，那么你可以对助手进行export，并对主要函数进行export+default。当您导入一个模块并需要这两种导出时，请使用import+d,+{a,+b}+from+c。|2731209|另一种选择是，您可以通过在模块末尾列出导出来命名导出，例如：export+{a,b,c}。您还可以将它们重命名为export+{a+as+$a,+b+as+c}。|2731210|所有这些都是从this+article获得的，它是我所能找到的最新的es6模块信息的最好来源。|2731211|entityMap|0|LINK|mutability|MUTABLE|url|http://www.2ality.com/2014/09/es6-modules-final.html^0|0|G|28|23|K|0|0|33|14|5|1X|8|2N|F|0|0|3Q|1N|6|22|E|32|N|0|0|29|U|E|1K|O|0|0|1B|7|C|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]|$D|12|E|13|F|H]]|9|@]|A|$]]|$1|I|3|J|5|6|7|14|8|@$D|15|E|16|F|G]|$D|17|E|18|F|H]|$D|19|E|1A|F|H]|$D|1B|E|1C|F|H]]|9|@]|A|$]]|$1|K|3|L|5|6|7|1D|8|@$D|1E|E|1F|F|G]|$D|1G|E|1H|F|H]|$D|1I|E|1J|F|H]|$D|1K|E|1L|F|H]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1M|8|@$D|1N|E|1O|F|G]|$D|1P|E|1Q|F|H]|$D|1R|E|1S|F|H]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1T|8|@$D|1U|E|1V|F|G]]|9|@$D|1W|E|1X|1|1Y]]|A|$]]|$1|Q|3|-4|5|6|7|1Z|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

Both of these are valid.

Method 1 provides named exports. The key here is that you can export more than one thing. This should be used instead of exporting an object with multiple properties. When you import a module with named exports, use <code>import {a, b} from c</code>.

Method 2 provides the default export. There can be only one default export. This is primarily used when you are exporting a single thing, like a <code>class</code>, or a single <code>function</code> that you expect to be used without any additional support. When you import a module with a default export, use <code>import d from c</code>.

Note that you can use both! so if you have a major, primary function with a handful of occasionally used helpers, you can <code>export</code> the helpers, and <code>export default</code> the primary. When you import a module and need both kinds of exports, use <code>import d, {a, b} from c</code>.

One other option is that you can get named exports by listing them at the end of your module, like so: <code>export {a,b,c}</code>. You can also rename them <code>export {a as $a, b as c}</code>.

I got all of this from <a href="http://www.2ality.com/2014/09/es6-modules-final.html">this article</a>, which is the best source for up-to-date es6 module information that I've been able to find.

blocks|key|2943561|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2943562|blockquote|2943563|2943564|2943565|这两个都是有效的？|ordered-list-item|2943566|2943567|不，export+function+()+{+return+answer;+};是无效的，要么使用default，要么在函数声明中添加一个名称。|offset|length|style|CODE|2943568|2943569|2943570|2943571|2943572|如果是这样，为什么它们都存在？|2943573|2943574|它们不会:)|2943575|2943576|2943577|2943578|2943579|是否有使用ES6语法导出模块的其他有效选项？|2943580|2943581|你可以在这里看到很多有效的选项：https://github.com/eslint/espree/pull/43|2943582|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/eslint/espree/pull/43^0|0|0|0|0|0|0|2|12|0|0|0|0|0|0|0|0|0|0|0|0|0|0|G|14|0|0^^$0|@$1|2|3|-4|4|5|6|1E|7|@]|8|@]|9|$]]|$1|A|3|-4|4|B|6|1F|7|@]|8|@]|9|$]]|$1|C|3|-4|4|5|6|1G|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|1H|7|@]|8|@]|9|$]]|$1|E|3|F|4|G|6|1I|7|@]|8|@]|9|$]]|$1|H|3|-4|4|5|6|1J|7|@]|8|@]|9|$]]|$1|I|3|J|4|5|6|1K|7|@$K|1L|L|1M|M|N]]|8|@]|9|$]]|$1|O|3|-4|4|5|6|1N|7|@]|8|@]|9|$]]|$1|P|3|-4|4|B|6|1O|7|@]|8|@]|9|$]]|$1|Q|3|-4|4|5|6|1P|7|@]|8|@]|9|$]]|$1|R|3|-4|4|5|6|1Q|7|@]|8|@]|9|$]]|$1|S|3|T|4|G|6|1R|7|@]|8|@]|9|$]]|$1|U|3|-4|4|5|6|1S|7|@]|8|@]|9|$]]|$1|V|3|W|4|5|6|1T|7|@]|8|@]|9|$]]|$1|X|3|-4|4|5|6|1U|7|@]|8|@]|9|$]]|$1|Y|3|-4|4|B|6|1V|7|@]|8|@]|9|$]]|$1|Z|3|-4|4|5|6|1W|7|@]|8|@]|9|$]]|$1|10|3|-4|4|5|6|1X|7|@]|8|@]|9|$]]|$1|11|3|12|4|G|6|1Y|7|@]|8|@]|9|$]]|$1|13|3|-4|4|5|6|1Z|7|@]|8|@]|9|$]]|$1|14|3|15|4|5|6|20|7|@]|8|@$K|21|L|22|1|23]]|9|$]]|$1|16|3|-4|4|5|6|24|7|@]|8|@]|9|$]]]|17|$18|$4|19|1A|1B|9|$1C|1D]]]]

<blockquote>
 <ol>
 <li>Are both of these valid?</li>
 </ol>
</blockquote>

No, <code>export function () { return answer; };</code> is invalid, either you use default, or you add a name to that function declaration.

<blockquote>
 <ol start="2">
 <li>If so, why do they both exist?</li>
 </ol>
</blockquote>

They don't :)

<blockquote>
 <ol start="3">
 <li>Are there other valid options for module exports using ES6 syntax?</li>
 </ol>
</blockquote>

You can see a lot of valid options here: <a href="https://github.com/eslint/espree/pull/43" rel="nofollow">https://github.com/eslint/espree/pull/43</a>

blocks|key|150779|text|一年后，这是我找到的关于这个主题的最好的信息。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|150780|有4种类型的出口。下面是每种方法的用法示例，以及一些使用它们的导入：|150781|导出语法|150782|//+default+exports
export+default+42;
export+default+{};
export+default+[];
export+default+(1+%2B+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";|code-block|syntax|javascript|150783|导入语法|150784|//+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";|150785|Source.|offset|length|150786|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/eslint/espree/pull/43^0|0|0|0|0|0|0|0|7|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|16|8|@]|9|@$Q|17|R|18|1|19]]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

A year and some later, here is the best information I've found on the subject.

There are 4 types of exports. Here are usage examples of each, along with some imports that use them:

<h1>Export Syntax</h1>

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

<h1>Import Syntax</h1>

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

<a href="https://github.com/eslint/espree/pull/43">Source.</a>

I've seen public exports of ES6 modules done in both of the following ways:

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

// method 2
export default function () { return 'forty two'; };
</code></pre>

<ol>
<li>Are both of these valid?</li>
<li>If so, why do they both exist?</li>
<li>Are there other valid options for module exports using ES6 syntax?</li>
</ol>

I'm surprised I haven't been able to find the answer with my googlefu. I'm concerned only with ES6 modules, not CommonJS, RequireJS, AMD, Node, etc.

ES6+ javascript module export options

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我见过通过以下两种方式实现ES6模块的公共导出：// method 1export var getAnswer = function () { return 'forty two'; };// method 2export default function () { return 'forty two'; };这两个选...

问ES6+ javascript模块导出选项
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ES6+ javascript模块导出选项EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ES6+ javascript模块导出选项
EN