浏览器加载
传统加载
默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到<script>标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间。
如果脚本体积很大，下载和执行的时间就会很长，所以浏览器允许脚本异步加载，下面就是两种异步加载的语法。
<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>
defer是“渲染完再执行”，等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成）
async是“下载完就执行”，一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。
另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。
加载规则
浏览器加载 ES6 模块，也使用<script>标签，但是要加入type="module"属性，这样浏览器就知道这是一个ES6模块。
<script type="module" src="./foo.js"></script>
浏览器对于带有type="module"的<script>，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了<script>标签的defer属性。与defer一样，如果有多个，也会安装顺序加载。
也可以在引入ES6模块的时候打开<script>标签的async属性，这样就与传统加载的async属性一样加载完成就执行，且不管顺序。
<script type="module" src="./foo.js" async></script>
ES6 模块也允许内嵌在网页中，语法行为与加载外部脚本完全一致。
<script type="module">
import utils from "./utils.js";
// other code
</script>
这样写有几点需要注意
- 代码是在模块作用域之中运行，而不是在全局作用域运行。模块内部的顶层变量，外部不可见。
- 模块脚本自动采用严格模式，不管有没有声明use strict
- 模块之中，可以使用import命令加载其他模块（.js后缀不可省略，需要提供绝对 URL 或相对 URL），也可以使用export命令输出对外接口
- 模块之中，顶层的this关键字返回undefined，而不是指向window。也就是说，在模块顶层使用this关键字，是无意义的。
- 同一个模块如果加载多次，将只执行一次
利用顶层的this等于undefined这个语法点，可以侦测当前代码是否在 ES6 模块之中，全等于undefined则是在ES6模块中。
ES6 模块与 CommonJS 模块的差异
CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用
CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。
ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。
CommonJS 模块是运行时加载，ES6 模块是编译时输出
因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。ES6 模块不会缓存运行结果，而是动态地去被加载的模块取值，并且变量总是绑定其所在的模块。
export通过接口，输出的是同一个值。不同的脚本加载这个接口，得到的都是同样的实例。
// mod.js
function C() {
this.sum = 0;
this.add = function () {
this.sum += 1;
};
this.show = function () {
console.log(this.sum);
};
}
export let c = new C();
// x.js
import {c} from './mod';
c.add();
// y.js
import {c} from './mod';
c.show();
// main.js
import './x';
import './y';
// 执行main.js 输出1
Node 加载
Node 要求 ES6 模块采用.mjs后缀文件名。也就是说，只要脚本文件里面使用import或者export命令，那么就必须采用.mjs后缀名。require命令不能加载.mjs文件，会报错。
目前，这项功能还在试验阶段。安装 Node v8.5.0 或以上版本，要用--experimental-modules参数才能打开该功能。
$ node --experimental-modules my-app.mjs
为了与浏览器的import加载规则相同，Node 的.mjs文件支持 URL 路径。
import './foo?query=1'; // 加载 ./foo 传入参数 ?query=1
Node 的import命令只支持加载本地模块（file:协议），不支持加载远程模块。
如果模块名不含路径，那么import命令会去node_modules目录寻找这个模块。
比如import './foo'，Node 会依次尝试四个后缀名：./foo.mjs、./foo.js、./foo.json、./foo.node。如果这些脚本文件都不存在，Node 就会去加载./foo/package.json的main字段指定的脚本。如果./foo/package.json不存在或者没有main字段，那么就会依次加载./foo/index.mjs、./foo/index.js、./foo/index.json、./foo/index.node。如果以上四个文件还是都不存在，就会抛出错误。
内部变量
ES6 模块应该是通用的，同一个模块不用修改，就可以用在浏览器环境和服务器环境。为了达到这个目标，Node 规定 ES6 模块之中不能使用 CommonJS 模块的特有的一些内部变量。
以下这些顶层变量在 ES6 模块之中都是不存在的
- 顶层的this指向undefined；CommonJS 模块的顶层this指向当前模块
- arguments
- require
- module
- exports
- __filename
- __dirname
如果你一定要使用这些变量，有一个变通方法，就是写一个 CommonJS 模块输出这些变量，然后再用 ES6 模块加载这个 CommonJS 模块。但是这样一来，该 ES6 模块就不能直接用于浏览器环境了，所以不推荐这样做。
ES6 模块加载 CommonJS 模块
CommonJS 模块的输出都定义在module.exports这个属性上面。Node 的import命令加载 CommonJS 模块，Node 会自动将module.exports属性，当作模块的默认输出，即等同于export default xxx。
// c.js
module.exports = function two() {
return 2;
};
// 等同于
export default function two() {
return 2;
};
// es.js
import foo from './c';
foo(); // 2
import * as bar from './c';
bar.default(); // 2
bar(); // throws, bar is not a function
CommonJS 模块的输出缓存机制，在 ES6 加载方式下依然有效。
// foo.js
module.exports = 123;
setTimeout(()=> module.exports = null);
// 对于加载foo.js的脚本，module.exports将一直是123，而不会变成null。
由于 ES6 模块是编译时确定输出接口，CommonJS 模块是运行时确定输出接口，所以采用import命令加载 CommonJS 模块时，只能使用整体引入，不能按需引入。
// 不正确
import { readFile } from 'fs';
// 正确
import fs from 'fs';
const readFile = fs.readFile;
因为fs是 CommonJS 格式，只有在运行时才能确定readFile接口，而import命令要求编译时就确定这个接口。解决方法就是改为整体输入。
CommonJS 模块加载 ES6 模块
CommonJS 模块加载 ES6 模块，不能使用require命令，而要使用import()函数。ES6 模块的所有输出接口，会成为输入对象的属性。
// es.mjs
let foo = { bar: 'my-default' };
export default foo;
// cjs.js
const es_namespace = await import('./es.mjs');
// default接口变成了es_namespace.default属性
console.log(es_namespace.default);
// { bar:'my-default' }
另一个例子
// es.js
export let foo = { bar:'my-default' };
export { foo as bar };
export function f() {};
export class c {};
// cjs.js
const es_namespace = await import('./es');
// es_namespace = {
// get foo() {return foo;}
// get bar() {return foo;}
// get f() {return f;}
// get c() {return c;}
// }
循环加载
“循环加载”（circular dependency）指的是，a脚本的执行依赖b脚本，而b脚本的执行又依赖a脚本。
通常，“循环加载”表示存在强耦合，如果处理不好，还可能导致递归加载，使得程序无法执行，因此应该避免出现。
但是实际上，这是很难避免的，尤其是依赖关系复杂的大项目，很容易出现a依赖b，b依赖c，c又依赖a这样的情况。这意味着，模块加载机制必须考虑“循环加载”的情况。
CommonJS 模块的循环加载
CommonJS 的一个模块，就是一个脚本文件。require命令第一次加载该脚本，就会执行整个脚本，然后在内存生成一个对象。
{
id: '...',
exports: { ... },
loaded: true,
...
}
该对象的id属性是模块名，exports属性是模块输出的各个接口，loaded属性是一个布尔值，表示该模块的脚本是否执行完毕。其他还有很多属性，这里都省略了。
以后需要用到这个模块的时候，就会到exports属性上面取值。即使再次执行require命令，也不会再次执行该模块，而是到缓存之中取值。也就是说，CommonJS 模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。
CommonJS 模块的重要特性是加载时执行，即脚本代码在require的时候，就会全部执行。一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。
// a.js
exports.done = false;
var b = require('./b.js'); // 1.执行到这就去加载执行b.js了
console.log('在 a.js 之中，b.done = %j', b.done); // 4. b执行完时，b.done是true
exports.done = true;
console.log('a.js 执行完毕');
// b.js
exports.done = false;
var a = require('./a.js'); // 2. 此时a只执行了一半， 所以 a.done是false
console.log('在 b.js 之中，a.done = %j', a.done);
exports.done = true;
console.log('b.js 执行完毕'); //3. b执行完就把执行权交还给a
// main.js
var a = require('./a.js');
var b = require('./b.js');
console.log('在 main.js 之中, a.done=%j, b.done=%j', a.done, b.done);
// node main.js
// 在 b.js 之中，a.done = false
// b.js 执行完毕
// 在 a.js 之中，b.done = true
// a.js 执行完毕
// 在 main.js 之中, a.done=true, b.done=true
由于 CommonJS 模块遇到循环加载时，返回的是当前已经执行的部分的值，而不是代码全部执行后的值，两者可能会有差异。所以，输入变量的时候，必须非常小心。
var a = require('a'); // 安全的写法
var foo = require('a').foo; // 危险的写法 因为a.foo很可能在后面被改写
exports.good = function (arg) {
return a.foo('good', arg); // 使用的是 a.foo 的最新值
};
exports.bad = function (arg) {
return foo('bad', arg); // 使用的是一个部分加载时的值
};
ES6 模块的循环加载
ES6 处理“循环加载”与 CommonJS 有本质的不同。ES6 模块是动态引用，如果使用import从一个模块加载变量（即import foo from 'foo'），那些变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。
// a.mjs
import {bar} from './b';
console.log('a.mjs');
console.log(bar);
export let foo = 'foo';
// b.mjs
import {foo} from './a';
console.log('b.mjs');
console.log(foo);
export let bar = 'bar';
// nocd a.js
// b.mjs
// ReferenceError: foo is not defined
执行a.mjs以后，引擎发现它加载了b.mjs，因此会优先执行b.mjs， 然后再执行a.mjs。接着，执行b.mjs的时候，已知它从a.mjs输入了foo接口，这时不会去执行a.mjs，而是认为这个接口已经存在了，继续往下执行。 执行到第三行console.log(foo)的时候，才发现这个接口根本没定义，因此报错。
解决这个问题的方法，就是让b.mjs运行的时候，foo已经有定义了。这可以通过将foo写成函数来解决。这是因为函数具有提升作用，写成函数表达式，也会报错。
ES6 模块的转码
浏览器目前还不支持 ES6 模块，为了现在就能使用，可以将其转为 ES5 的写法。除了 Babel 可以用来转码之外，还有以下两个方法，也可以用来转码。
ES6 module transpiler
可以将 ES6 模块转为 CommonJS 模块或 AMD 模块的写法，从而在浏览器中使用。
安装：npm install -g es6-module-transpiler
使用compile-modules convert命令，将 ES6 模块文件转码: compile-modules convert file1.js file2.js
-o参数可以指定转码后的文件名: compile-modules convert -o out.js file1.js
SystemJS
它是一个垫片库（polyfill），可以在浏览器内加载 ES6 模块、AMD 模块和 CommonJS 模块，将其转为 ES5 格式。它在后台调用的是 Google 的 Traceur 转码器。
先在网页内载入system.js文件。
<script src="system.js"></script>
然后，使用System.import方法加载模块文件。
<script>
System.import('./app.js');
</script>
System.import使用异步加载，返回一个 Promise 对象，可以针对这个对象编程
