es6 module

es6 module是像commonJS那样同步的，因为它不像requireJS那样支持异步，都是同步。至于webpack的按需加载，等我再学习学习。 commonJS只是exports的一个拷贝，但是es6 modules是exports的一个引用。

// webpack实现es6 module如下
// hello.js
export var foo = 'hello';
// 演变成如下
__webpack_require__.d = function(export, name, getter) {
    Object.defineProperty(exports, 'foo', {
        enumerable: true,
        get: getter
    })
}
function (module, __webpack_exports__, __webpack_require__) {
    var foo = 'hello';
    __webpack_require__.d(__webpack_exports__, 'foo', function() {
        return foo;
    })
}
复制代码

利用函数作用域，闭包的原理

这样在运行前就定义了exports里面的内容，循环引用就很好解决了。

不像commonjs，运行到module.exports的时候才会知道exports有什么，并拷贝，这样循环引用的时候就会出现module.exports没有运行到

因此， es6的module是静态的

es6 module是一个静态的模块系统，有如下几个特点：

• 所有的import和export只能写在顶级作用域中。你不能在条件判断语句和函数作用域内使用import
• 所有export的变量名必须是显式的，你不能通过遍历一个数组，动态导出生成一组导出名进行导出。
• 模块对象都是被冻结的，不能通过polyfill为它添加新的特性
• 在所有模块运行之前，其依赖的模块都必须经过加载、解析、链接的过程，后来出了import()用来解决运行时模块加载（webpack处理了import()）
• 对于import的错误，无法进行恢复。一个应用可能依赖许多的模块，一旦有一个模块加载失败，这个应用都不会运行，你不能在try/catch中使用import。正是因为es6的模块表现如此静态，webpack才能在编译的时候检测出代码中的错误。
• 你没法为一个模块在家在所有依赖项之前添加钩子，这意味着一个模块没有办法控制其依赖项的加载方式。

import() import()可以在脚本的任何地方使用 import()接受字符串文字，或者变量，你可以根据你的需要构造说明符

babel实现es6module的时候是在commonjs基础上改造的，用的还是require但是module.exports用的exports（不知道为什么：）语法

let foo = {name: 'hello world'};
const test = 'aaaaa';
foo = 'test';
export {
  foo,
  test,
}
export default test;
复制代码

输出

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
let foo = { name: 'hello world' };
const test = 'aaaaa';
exports.foo = foo = 'test';
exports.foo = foo;
exports.test = test;
exports.default = test;
复制代码

然后webpack会处理require成__webpack_require__

参考资料：深入理解ES6的模块 深入理解ES6模块机制