import and export 之 （export）

ES6提供了两个关键字import导入和export导出，语法上有些差别。
!important: import和export必须,始终显示在,其各自用法的,顶级范围中。也就是说不可以在if条件中放置import或export; 它们必须放在所有块和函数之外。

exporting API Members 导出API成员

export关键字要么放在声明之前，要么作为运算符（排序）使用要export的特定绑定列表。

export function foo() {
    // ..
}

export var awesome = 42;

var bar = [1,2,3];
export { bar };

相同的表达exports的方法:

function foo() {
    // ..
}

var awesome = 42;
var bar = [1,2,3];

export { foo, awesome, bar };

这些都称为 命名导出( named export) ，因为您实际上导出变量/函数/等的名称绑定。
任何你不标记export,会在模块的范围内保持private。 也就是说，尽管var bar = ..看起来像是在顶级全局范围声明，顶级范围实际上是模块本身; 模块中没有全局范围。

注意：模块仍然可以访问window和所有的globals ，挂起它，只是不是作为词汇顶级范围。 但是，你真的应该远离全局模块，如果可能的话。

您还可以在命名导出期间对模块成员进行“重命名”（也称为别名）：

function foo() { .. }

export { foo as bar };

导入此模块时，只有bar成员名称可用于导入; foo保持隐藏在模块内。

模块导出不仅仅是值或引用的正常赋值，因为您习惯于=赋值运算符。 实际上，当你导出一些东西，你正在导出一个绑定（有点像一个指针）到那个东西（变量等）。

在模块中，如果更改已导出绑定的变量的值，即使已经导入（参见下一部分），导入的绑定也将解析为当前（更新）的值。

试想一下：

var awesome = 42;
export { awesome };

// later
awesome = 100;

导入此模块时，无论是在awesome = 100设置之前还是之后，一旦分配已经发生，导入的绑定将解析为值100，而不是42。

这是因为绑定本质上是对awesome变量本身的引用或指针，而不是其值的副本。JS引入了ES6模块绑定,这是一个大多数前所未有的概念。

虽然您可以在模块的定义中清楚地多次使用export，但ES6绝对偏好模块,具有单个导出的方法，这称为default export。用TC39委员会的一些成员的话来说，如果你遵循这种模式，你就会被“简单的import语法”所奖励，而如果你不这么做，则反过来被更冗长的语法来“惩罚”。

默认导出将特定导出的绑定设置为导入模块时的默认值。绑定的名称字面上是默认的。正如你将在后面看到的，当导入模块绑定时，你也可以重命名它们，就像你通常使用默认导出一样。

每个模块定义只能有一个默认值。如果模块具有默认导出，您将看到导入语法如何更简洁。

对于默认导出语法有一个微妙的细微差别，您应该密切注意。比较这两个片段：

function foo(..) {
    // ..
}

export default foo;

and

function foo(..) {
    // ..
}

export { foo as default };

在第一个片段中，您正在导出一个绑定到此时的函数表达式值，而不是标识符foo。 换句话说，导出export default ..采用一个表达式。 如果以后将foo分配给模块中的其他值，则模块导入仍会显示最初导出的函数，而不是新值。

顺便说一下，第一个片段也可以写成：

export default function foo(..) {
    // ..
}

警告：虽然这里function foo..在技术上,是一个函数表达式，为了模块的内部范围的目的，它被视为一个函数声明，因为foo名称绑定在模块的顶级作用域 称为“提升”）。 出口默认类Foo也是如此。但是，虽然你可以做到export var foo = ..，但你目前不能做到export default var foo = ..（或let或const），在一个令人沮丧的不一致的情况下。 在撰写本文时，为了一致性，已经讨论了在ES6之后很快增加这种能力。

function foo(..) {
    // ..
}

export { foo as default };

在此版本的模块导出中，默认导出绑定实际上是foo标识符而不是它的值，所以您获得前面描述的绑定行为（即，如果您以后更改foo的值，你在import端看到的值也将更新）。

在默认导出语法中要非常小心这个微妙的问题，特别是如果你的逻辑需要更新导出值。 如果你从来没有计划更新默认导出的值，export default ..是很好的。 如果您计划更新值，则必须使用export {.. as default}。 无论哪种方式，确保评论你的代码如何来解释你的意图！

因为每个模块只能有一个默认值，所以您可能会试图使用一个对象的默认导出,来设计您的模块，其中包含所有的API方法，例如：

export default {
    foo() { .. },
    bar() { .. },
    ..
};

这种模式，似乎很密切地，映射了很多开发人员，已经构建了，他们的ES6之前的模块，所以，它似乎是，一个自然的方法。 不幸的是，它存在一些缺点，并正式地不鼓励这样做。

特别是，JS引擎，不能静态分析普通对象的内容，这意味着，它不能对静态导入性能，做一些优化。 每个成员单独和显式导出的优点是，引擎可以进行静态分析和优化。

如果你的API，已经有多个成员，似乎这些原则 - 每个模块一个默认导出，所有API成员名为exports - 存在冲突，不是吗？ 但是您可以有一个默认导出以及其他命名导出; 它们不是相互排斥的。

因此，替换掉当前的（不建议的）模式：

export default function foo() { .. }

foo.bar = function() { .. };
foo.baz = function() { .. };

you can do that

export default function foo() { .. }

export function bar() { .. }
export function baz() { .. }

注意：在前面的代码段中，我使用名称foo作为默认函数的标签。 然而，名称foo，为了导出的目的被忽略 - default实际上是导出的名称。 当您导入此默认绑定时，您可以为其指定任何所需的名称，如下一部分中所示。

function foo() { .. }
function bar() { .. }
function baz() { .. }

export { foo as default, bar, baz, .. };

当我们短期覆盖import时，混合default和命名exports的影响将更加清晰。但实质上它意味着最简洁的默认import形式,将只检索foo()函数。用户可以另外手动将bar和baz列为命名导入，如果他们想要的话。

你可以想象如果你有很多命名的导出绑定，你模块的用户将是多么乏味。这里有一个通配符导入表单，您可以在单个命名空间对象中导入所有模块的exports，但是无法将通配符导入到顶级绑定。

同样，ES6模块机制被有意设计为阻止具有大量输出的模块;相对来说，希望这样的方法有点困难，作为一种社会工程，它鼓励简单的模块设计，因为这将有利于大/复杂的模块设计。

我建议你不要混合default export与命名exports，这将是是不切实际或不需要，特别是如果你有一个大的API和重构单独的模块。在这种情况下，只需使用所有named exports，并记录您的模块的用户应该使用import * as ..（命名空间导入）方法在单个命名空间中立即带来整个API。

我们之前提到过，但让我们更详细地回味一下。除了导出表达式值绑定的export default ...外，所有其他导出表单,都正在导出绑定到本地标识符。