ES6 模块系统

在 ES6 之前，我们已经知道了 RequireJS，AngularJS 的依赖注入，以及 CommonJS，具体可以看笔者的上一篇文章《JS 模块化历史简介》。当我们学习 ES6 的模块化，就会发现它的发展深受 CommonJS 的影响。通过这篇文章，我们将看到 export 和 import 语句，以及 ES6 模块是怎么与 CommonJS 模块兼容的。

严格模式

在 ES6 模块系统中，严格模式是默认开启的。严格模式是语言从语法层面限制你使用一些不好的写法，所以它更严格（==）。它也让编译器更好地处理代码。下面是 MDN 上关于严格模式的解释：严格模式

• 变量必须显式声明
• 函数的形参必须有唯一的名称（否则会报语法错误）
• 不能使用 with
• 给只读的属性赋值会报错
• 像 00840 这样的八进制数字会报语法错误
• 试图 delete 无法删除的属性会报错
• delete prop 会报语法错误，可以使用 delete global[prop]
• eval 不会在所在的词法作用域引入新的变量
• eval 和 arguments 不能被改变或赋值
• arguments 不会跟踪方法的参数变化
• arguments.callee 不再支持，会报 TypeError
• arguments.caller 不再支持，会报 TypeError
• 传入方法内部的 this 不再被强制转换成 Object
• fn.caller 和 fn.arguments 不再支持
• 保留关键字 protected，static，interface 不能被绑定

即使在 ES6 中严格默认是默认开启的，也推荐在每个模块中都使用 use strict 关键字。

让我们先来看下 export 关键字吧~

export

在 CommonJS 中，导出模块可以用 module.exports。从下面的代码可以看出，你可以导出任何值：

module.exports = 1
module.export = NaN
module.exports = 'foo' 
module.exports = {foo: 'bar'} 
module.exports = ['foo', 'bar'] 
module.exports = function foo () {}

像 CommonJS 模块一样，ES6 模块也是暴露 API 的文件。同样的，ES6 模块内部的声明只在模块内部有效。这就意味着，某个模块中的变量，如果没有被导出，在其他模块中就无法使用。

Exporting a Default Binding

上面的 CommonJS 代码如果用 ES6 语法写起来也很相似，主要就是将 module.exports 替换为 export default

export default 1 
export default NaN 
export default 'foo' 
export default {foo: 'bar'} 
export default ['foo', 'bar'] 
export default function foo () {}

而与 CommonJS 不同的是，export 语句只能放在 ES6 模块代码的顶层，就算放在一个立即执行的函数中也不行。可想而知，这种限制让编译器更容易解析 ES6 模块，同时也让避免了在方法中动态导出这种不是很实用的骚操作。

function foo () {export default 'bar' // SyntaxError} 
foo()

导出语法不是只有 export default，你也可以使用具名导出。

Named Exports

在 CommonJS 中导出时也不是必须将 module.exports 赋值为一个对象，你可以直接改变它的属性。

module.exports.foo = 'bar'
module.exports.baz = 'ponyfoo'

好了，下面用 ES6 的写法也很简单（原文说了一堆不太重要就没翻~）：

export var foo = 'bar'
export var baz = 'ponyfoo'

有一句话要始终牢记，我们导出的是绑定而不是值。

Bindings, Not Values

在 ES6 模块中重要的一个点是：导出的是绑定，而不是值或者引用。这就意味着你导出的变量 foo 被绑定在了模块上，它的值改变了，外部也能收到变化。尽管通常情况下不推荐在模块加载后改变导出的值。

如果你有一个 ./a 模块，导出的 foo 将在 500ms 后从 bar 变为 baz：

export var foo = 'bar'
setTimeout(() => foo = 'baz', 500)

除了默认绑定和具名绑定，我们还可以导出一个列表的绑定。

Exporting Lists

下面的代码可以看到，ES6 模块允许我们导出一个包含顶级成员的列表：

var foo = 'ponyfoo'
var bar = 'baz'
export {foo, bar}

如果你想改变其中变量的名字，可以用以下语法：

export {foo as ponyfoo}

同时也可以指定其中的某个为默认导出：

export {foo as default, bar}

而通常的最佳实践是只使用 export default，并且将其放在模块的底部。

Best Practices and export

如果同时使用命名导出，导出列表和默认导出，很容易造成困扰，所以大部分情况下作者建议只使用 export default，并且将语句放在模块文件的底部。你可以将要导出的对象叫作 api：

var api = {
    foo: 'bar',
    baz: 'ponyfoo'
}
export default api

这样做有几个好处：（原文比较啰嗦，下面提炼两点）

1. 将导出的内容包裹在一个对象中，在模块内部可以很容易找到导出的内容。
2. 只使用 export default 具有一致性，不会因为过多导出方式造成混淆，在使用的时候也更加方便。

我们已经熟悉了 export 的 API 和注意事项，下面来看 import 语句。

import

作为与 export 相对的语句，import 可以让我们导入另一个模块中的内容。模块的加载方式，在浏览器端主要依靠 Babel 实现。而在内部 import 语句的实现也几乎是和 CommonJS 的 require 语句一样。

让我们用 lodash 来说明。下面的语句简单地加载了 Lodash 模块到我们自己的模块，它没有创建任何变量，但它将会执行 lodash 模块顶层代码的内容。

import 'lodash'

在讲导入绑定之前，我们需要先明确的是，跟 export 语句类似，import 语句也只能在模块的顶层代码使用。这能让编译器更好地处理解析工作，也能帮助其他静态分析工具解析我们的代码。

Importing Default Exports

在 CommonJS 中，我们使用 require 导入内容：

var _ = require('lodash')

在 ES6 模块中，我们只需要为导入的绑定起一个名字：

import _ from 'lodash'

我们也可以导入具名导出的内容。

Importing Named Exports

这个语法跟 ES6 的解构赋值很相似，但是也不太一样：

import {map, reduce} from 'lodash'

跟解构赋值不同的其中一点是，你可以为导入的绑定创建别名，可以同时使用有别名和没有别名的导入。

import {cloneDeep as clone, map} from 'lodash'

也可以同时使用具名和默认的导入，如果要在花括号内使用默认导入，需要使用 default 关键字，当然也可以给它起个别名，或者像第三行那样：

import {default, map} from 'lodash'
import {default as _, map} from 'lodash'
import _, {map} from 'lodash'

import All The Things

我们也可以导入一个模块中的整个命名空间。import * 这个语法后面必须跟一个别名，这个别名中就存放了导入模块的所有绑定。如果里面包含一个默认导出，那么它放被放在了 alias.default 中

import * as _ from 'lodash'

Conclusions

我们今天可以直接使用 ES6 模块，得益于 Babel 编译器借助了 CommonJS 模块的实现。这其中的一个好处就是 CommonJS 和 ES6 模块之间是兼容的，即我们可以在 ES6 模块中直接写 CommonJS 的语法。

ES6 模块系统看起来很棒，而它也是 JavaScript 中的一个最重要的功能。希望在不久的将来，模块加载 API 可以最终敲定并直接在浏览器端实现。

---

原文链接

欢迎关注我的公众号： 码力全开 （codingonfire）