ES6之module实现

我们一般用script标签加载js，本来脚本是同步加载，用defer和async属性可以一步加载，两者的区别是，defer是渲染完执行，也就是DOM结构完全生成，async是下载完执行，所以defer会按顺序加载，async不能保证顺序。

除了在框架内，我们使用script的时候也可以使用module：

type会让浏览器知道这是ES6模块，且这相当于开启了defer属性，如果你又写了async属性那么就会采用async。type是module也可以内嵌网页中，跟在当前HTML页面写js代码一样。

a.html里面：

a.js里面：

export var a = 100;

console.log('a.js' + a);

注意点：

模块内部变量外部不可见

自动采用严格模式，不管有没有use strict

用import的时候.js不可省略

使用了严格模式，this是undefined而不是window，通过这个可以判断是否在ES6模块中

同一个模块加载多次之执行一次

我们都知道早期用的模块化是commonjs，那ES6出来之后，大部分会使用ES6，那两者的区别还是需要知道的：

Commonjs输出的是一个值的拷贝，ES6是值的引用。因为是引用，所以如果对他赋值操作会报错。

Commonjs是运行时加载，ES6是编译时输出。

Node对ES6采用的是分开处理，因为node有自己的commonjs，node规定，ES6 模块采用.mjs后缀文件名。只要脚本文件里面使用import或者export命令，那么就必须采用.mjs后缀名。require命令不能加载.mjs文件，会报错，只有import命令才可以加载.mjs文件。反过来，.mjs文件里面也不能使用require命令，必须使用import。

在node中为了能用在浏览器环境和服务器环境，规定了ES6不能使用commonjs模块的特有的内部变量：

this

arguments

require

module

exports

__filename

__dirname

ES6可以加载commonjs的模块，node会自动把module.exports属性变成export default。CommonJS 模块加载 ES6 模块，不能使用require命令，而要使用import()函数。ES6 模块的所有输出接口，会成为输入对象的属性。

浏览器暂时还没有大批量的支持ES6，现在除了用babel之外，还有ES6 module transpiler和systemjs两个支持转换。

ES6 module transpiler是 square 公司开源的一个转码器，可以将 ES6 模块转为 CommonJS 模块或 AMD 模块的写法，从而在浏览器中使用

SystemJS。它是一个垫片库（polyfill），可以在浏览器内加载 ES6 模块、AMD 模块和 CommonJS 模块，将其转为 ES5 格式。它在后台调用的是 Google 的 Traceur 转码器。

转载于:https://juejin.im/post/5d0adff1f265da1b6c5f7b0d