Module 的语法（import，import()，export，AMD， CommonJS ）
参考网站
http://es6.ruanyifeng.com/#docs/module
起因
历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。这对开发大型的、复杂的项目形成了巨大障碍。
ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
设计思路
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。
CommonJS 加载
CommonJS 模块输出的是值的缓存，不存在动态更新
// CommonJS模块
let { stat, exists, readFile } = require('fs');
// 等同于
let _fs = require('fs'); // 这种加载称为“运行时加载”，
// 因为只有运行时才能得到这个对象（即得到_fs），导致完全没办法在编译时做“静态优化”。
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;es6import命令加载
ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。
// ES6模块
import { stat, exists, readFile } from 'fs';
上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。
ES6 模块的好处
- 不再需要
UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点。 - 将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者
navigator对象的属性。 - 不再需要对象作为命名空间（比如
Math对象），未来这些功能可以通过模块提供。 - 静态加载使得编译时就能确定模块的依赖关系，以及输入和输出的变量
es6模块严格模式
ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。
严格模式主要有以下限制。
- 变量必须声明后再使用
- 函数的参数不能有同名属性，否则报错
- 不能使用
with语句 - 不能对只读属性赋值，否则报错
- 不能使用前缀 0 表示八进制数，否则报错
- 不能删除不可删除的属性，否则报错
- 不能删除变量
delete prop，会报错，只能删除属性delete global[prop] eval不会在它的外层作用域引入变量eval和arguments不能被重新赋值arguments不会自动反映函数参数的变化- 不能使用
arguments.callee - 不能使用
arguments.caller - 禁止
this指向全局对象（顶层的this指向undefined） - 不能使用
fn.caller和fn.arguments获取函数调用的堆栈 - 增加了保留字（比如
protected、static和interface）
export 命令
export命令用于规定模块的对外接口
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。
export 输出变量
// profile.js
export var firstName = 'Michael'; // 使用export命令输出变量
export var lastName = 'Jackson';
export var year = 1958;
// 另一种写法
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};export 输出函数或类（class）
export function multiply(x, y) { // 输出一个函数multiply
return x * y;
};as关键字
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1, // 使用as关键字重命名
v2 as streamV2, // v2可以用不同的名字输出两次。
v2 as streamLatestVersion
};export注意点
1.export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。
接口：接口提供了一种用以说明一个对象应该具有哪些方法的手段
// 报错
export 1;
// 报错
var m = 1;
export m; // 直接输出 1，1只是一个值，不是接口（一个对象或者函数）
// 修改后
// 写法一
export var m = 1; // 可以看作export {var m = 1}
// 写法二
var m = 1;
export {m};
// 写法三
var n = 1;
export {n as m};同样的，function和class的输出，也必须遵守这样的写法。
// 报错
function f() {}
export f;
// 正确
export function f() {};
// 正确
function f() {}
export {f};2.export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500); // import的文件内，500 毫秒之后变成baz3.export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，这是因为处于条件代码块之中，就没法做静态优化了，违背了 ES6 模块的设计初衷。
function foo() {
export default 'bar' // SyntaxError
}
foo()export default 命令
用到export default命令，为模块指定默认输出。export default命令只能使用一次
// export-default.js
export default function () { // 默认输出是一个函数
console.log('foo');
}
其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。
// import-default.js
import customName from './export-default';
// 这时就不需要知道原模块输出的函数名，可以用任意名称指向export-default.js输出的方法
// import命令后面，不使用大括号。
customName(); // 'foo'如果想在一条import语句中，同时输入默认方法和其他接口，可以写成下面这样。
import _, { each, forEach } from 'lodash';export default命令用在非匿名函数前，也是可以的。
// export-default.js
export default function foo() {
console.log('foo');
}
// 或者写成
function foo() {
console.log('foo');
}
export default foo; // 没有default的export这样写是不行的
// 等效
export default function(){
console.log('foo');
}export default就是输出一个叫做default的变量或方法(export default命令的本质是将后面的值)，然后系统允许你为它取任意名字。所以，下面的写法是有效的。
// modules.js
function add(x, y) {
return x * y;
}
export {add as default}; // export default就是输出一个叫做default的变量或方法
// 等同于
// export default add;
// app.js
import { default as foo } from 'modules';
// 等同于
// import foo from 'modules';正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。
// 正确
export var a = 1;
// 正确
var a = 1;
export default a; // 含义是将变量a的值赋给变量default
// 错误
export default var a = 1; // default后是个赋值语句export default可以直接将一个值写在export default之后。
// 正确
export default 42;
//等同于 export {default ：42 }，这个返回是个接口
// 报错
export 42;import命令
使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。
// main.js
import {firstName, lastName, year} from './profile.js';
//大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}as关键字
import { lastName as surname } from './profile.js';import输入变量
import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。
import {a} from './xxx.js'
a = {}; // Syntax Error : 'a' is read-only;但是，如果a是一个对象，改写a的属性是允许的。
import {a} from './xxx.js'
a.foo = 'hello'; // 合法操作
// a的属性可以成功改写，并且其他模块也可以读到改写后的值。
// 不过，这种写法很难查错，建议凡是输入的变量，都当作完全只读import后面的from
import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。
import {myMethod} from 'util';
// 由于不带有路径，必须通过配置，告诉引擎怎么取到这个模块。import注意点
1.import命令具有提升效果，会提升到整个模块的头部，首先执行。
foo();
import { foo } from 'my_module';2.import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。
// 报错
import { 'f' + 'oo' } from 'my_module';
// 报错
let module = 'my_module';
import { foo } from module;
// 报错
if (x === 1) {
import { foo } from 'module1';
} else {
import { foo } from 'module2';
}
// 在静态分析阶段，这些语法都是没法得到值的。3.import语句会执行所加载的模块
import 'lodash'; // 上面代码仅仅执行lodash模块，但是不输入任何值4如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。
import { foo } from 'my_module';
import { bar } from 'my_module';
// 等同于
import { foo, bar } from 'my_module';5.*加载全部时，后面不可以直接调用
import * as circle from './circle'; // 即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));
// 下面两行都是不允许的
// 静态分析的，所以不允许运行时改变。
circle.foo = 'hello';
circle.area = function () {};export 与 import 的复合写法
export { foo, bar } from 'my_module';
// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };
// foo和bar实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar接口改名和整体输出，也可以采用这种写法。
// 接口改名
export { foo as myFoo } from 'my_module';
// 整体输出
export * from 'my_module';具名接口改为默认接口的写法如下。
export { es6 as default } from './someModule';
// 等同于
import { es6 } from './someModule';
export default es6;
同样地，默认接口也可以改名为具名接口。
export { default as es6 } from './someModule';模块的继承
假设有一个circleplus模块，继承了circle模块。
// main.js
import * as math from 'circleplus'; // 继承circle的属性或方法，改名后再输出 // 获取了所有接口
import exp from 'circleplus'; // 又输出了自定义的e变量和默认方法。 // 获取了circleplus的default接口
console.log(exp(math.e));const常量目录文件设置（方便常量管理）
// constants/db.js
export const db = {
url: 'http://my.couchdbserver.local:5984',
admin_username: 'admin',
admin_password: 'admin password'
};
// constants/user.js
export const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator'];
然后，将这些文件输出的常量，合并在index.js里面。
// constants/index.js
export {db} from './db';
export {users} from './users';
使用的时候，直接加载index.js就可以了。
// script.js
import {db, users} from './constants/index';import()动态加载
由来
import语句是在编译时静态分析的，这样的设计，固然有利于编译器提高效率，但也导致无法在运行时加载模块。
// 报错
if (x === 2) {
// 引擎处理import语句是在编译时，这时不会去分析或执行if语句，
// 所以import语句放在if代码块之中毫无意义，因此会报句法错误，而不是执行时错误。
import MyModual from './myModual';
}因此需要一个动态加载的import方式，即import();require到底加载哪一个模块，只有运行时才知道
const main = document.querySelector('main');
import(`./section-modules/${someVariable}.js`) // require到底加载哪一个模块，只有运行时才知道
.then(module => {
module.loadPageInto(main);
})
.catch(err => {
main.textContent = err.message;
});import()与其他的引入的区别
1.import语句与import()函数，两者区别主要是后者为动态加载（即import()函数与所加载的模块没有静态连接关系）。
2import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。
import()适用场合
下面是import()的一些适用场合。
（1）按需加载。
import()可以在需要的时候，再加载某个模块。
button.addEventListener('click', event => {
import('./dialogBox.js')
.then(dialogBox => {
dialogBox.open();
})
.catch(error => {
/* Error handling */
})
});
上面代码中，import()方法放在click事件的监听函数之中，只有用户点击了按钮，才会加载这个模块。
（2）条件加载
import()可以放在if代码块，根据不同的情况，加载不同的模块。
if (condition) {
import('moduleA').then(...);
} else {
import('moduleB').then(...);
}
上面代码中，如果满足条件，就加载模块 A，否则加载模块 B。
（3）动态的模块路径
import()允许模块路径动态生成。
import(f())
.then(...);
上面代码中，根据函数f的返回结果，加载不同的模块。
import()注意点
import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数。因此，可以使用对象解构赋值的语法，获取输出接口。
import('./myModule.js')
.then(({export1, export2}) => {
// ...·
});
上面代码中，export1和export2都是myModule.js的输出接口，可以解构获得。
如果模块有default输出接口，可以用参数直接获得。
import('./myModule.js')
.then(myModule => {
console.log(myModule.default);
});
上面的代码也可以使用具名输入的形式。
import('./myModule.js')
.then(({default: theDefault}) => {
console.log(theDefault);
});
如果想同时加载多个模块，可以采用下面的写法。
Promise.all([
import('./module1.js'),
import('./module2.js'),
import('./module3.js'),
])
.then(([module1, module2, module3]) => {
···
});
import()也可以用在 async 函数之中。
async function main() {
const myModule = await import('./myModule.js');
const {export1, export2} = await import('./myModule.js');
const [module1, module2, module3] =
await Promise.all([
import('./module1.js'),
import('./module2.js'),
import('./module3.js'),
]);
}
main();Module 的加载实现
传统方法异步加载实现
//
// type="module"等同于打开了3.外部的模块脚本(内嵌在网页中，语法行为与加载外部脚本完全一致)，有几点需要注意。
- 代码是在模块作用域之中运行，而不是在全局作用域运行。模块内部的顶层变量，外部不可见。
- 模块脚本自动采用严格模式，不管有没有声明
use strict。 - 模块之中，可以使用
import命令加载其他模块（.js后缀不可省略，需要提供绝对 URL 或相对 URL），也可以使用export命令输出对外接口。 - 模块之中，顶层的
this关键字返回undefined，而不是指向window。也就是说，在模块顶层使用this关键字，是无意义的。 - 同一个模块如果加载多次，将只执行一次。
import utils from 'https://example.com/js/utils.js';
const x = 1;
console.log(x === window.x); //false
console.log(this === undefined); // true
// 利用顶层的this等于undefined这个语法点，可以侦测当前代码是否在 ES6 模块之中。
// 此处代表是处于 ES6 外部模块之中。ES6 模块与 CommonJS 模块的差异
- CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用（一改原文件也该）。
- CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
原因
CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
CommonJS模块加载实例
// lib.js
var counter = 3;
function incCounter() {
counter++;
}
module.exports = {
counter: counter,
incCounter: incCounter,
};// main.js
var mod = require('./lib');
console.log(mod.counter); // 3
mod.incCounter();
console.log(mod.counter); // 3
// 因为mod.counter是一个原始类型的值，会被缓存写成一个函数，才能得到内部变动后的值。
// lib.js
var counter = 3;
function incCounter() {
counter++;
}
module.exports = {
get counter() { // counter属性实际上是一个取值器函数
return counter
},
incCounter: incCounter,
};es6模块加载实例
ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。换句话说，ES6 的import有点像 Unix 系统的“符号连接”，原始值变了，import加载的值也会跟着变，不同的脚本加载这个接口，得到的都是同样的实例。因此，ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
// lib.js
export let counter = 3;
export function incCounter() {
counter++;
}
// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4由于 ES6 输入的模块变量，只是一个“符号连接”，所以这个变量是只读的，对它进行重新赋值会报错。
// lib.js
export let obj = {};
// main.js
import { obj } from './lib';
obj.prop = 123; // OK
obj = {}; // TypeError
// 变量obj指向的地址是只读的（是一个接口），不能重新赋值，这就好比main.js创造了一个名为obj的const变量。
// 但可以在obj上添加属性Node 加载 ES6 模块
1.Node 要求 ES6 模块采用.mjs后缀文件名。也就是说，只要脚本文件里面使用import或者export命令，那么就必须采用.mjs后缀名。require命令不能加载.mjs文件，会报错，只有import命令才可以加载.mjs文件。
2.为了与浏览器的import加载规则相同，Node 的.mjs文件支持 URL 路径。
import './foo?query=1'; // 加载 ./foo 传入参数 ?query=1Node 会按 URL 规则解读。同一个脚本只要参数不同，就会被加载多次，并且保存成不同的缓存。由于这个原因，只要文件名中含有:、%、#、?等特殊字符，最好对这些字符进行转义。
3.如果模块名不含路径，那么import命令会去node_modules目录寻找这个模块。
import 'baz';
import 'abc/123';4.
- 如果脚本文件省略了后缀名，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。 - 如果以上四个文件还是都不存在，就会抛出错误。
内部变量区别
1.首先，就是this关键字。ES6 模块之中，顶层的this指向undefined；CommonJS 模块的顶层this指向当前模块，这是两者的一个重大差异。
2.其次，以下这些顶层变量在 ES6 模块之中都是不存在的。
argumentsrequiremoduleexports__filename__dirname
ES6 模块加载 CommonJS 模块
CommonJS 模块的输出都定义在module.exports这个属性上面。Node 的import命令加载 CommonJS 模块，Node 会自动将module.exports属性，当作模块的默认输出，即等同于export default xxx。
// a.js
module.exports = { // 会被视为默认输出 输出的是这样一个对象{ default: module.exports }
foo: 'hello',
bar: 'world'
};
// 等同于
export default {
foo: 'hello',
bar: 'world'
};获取module.exports
// 写法一
import baz from './a';
// baz = {foo: 'hello', bar: 'world'};
// 写法二
import {default as baz} from './a';
// baz = {foo: 'hello', bar: 'world'};
// 写法三
import * as baz from './a';由于 ES6 模块是编译时确定输出接口，CommonJS 模块是运行时确定输出接口，所以采用import命令加载 CommonJS 模块时，不允许采用下面的写法。
// 不正确
import { readFile } from 'fs';
// 上面的写法不正确，因为fs是 CommonJS 格式，只有在运行时才能确定readFile接口，
// 而import命令要求编译时就确定这个接口。解决方法就是改为整体输入。
import readFile from 'fs';
import * as readFile from 'fs';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'); // import()动态加载
// es_namespace = {
// get default() {
// ...
// }
// }
console.log(es_namespace.default);
// { bar:'my-default' }循环加载
// a.js
var b = require('b');
// b.js
var a = require('a');CommonJS 模块的加载原理
CommonJS 的一个模块，就是一个脚本文件。require命令第一次加载该脚本，就会执行整个脚本，然后在内存生成一个对象。
{
id: '...', // 模块名
exports: { ... }, // 模块输出的各个接口
loaded: true, // 布尔值，表示该模块的脚本是否执行完毕
... // 其他还有很多属性，这里都省略了
}以后需要用到这个模块的时候，就会到exports属性上面取值。即使再次执行require命令，也不会再次执行该模块，而是到缓存之中取值。除非手动清除系统缓存。
CommonJS 模块的循环加载
CommonJS 模块的重要特性是加载时执行，即脚本代码在require的时候，就会全部执行。一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。
脚本文件a.js代码如下。
exports.done = false;
var b = require('./b.js');
console.log('在 a.js 之中，b.done = %j', b.done);
exports.done = true;
console.log('a.js 执行完毕');
上面代码之中，a.js脚本先输出一个done变量，然后加载另一个脚本文件b.js。注意，此时a.js代码就停在这里，等待b.js执行完毕，再往下执行。
再看b.js的代码。
exports.done = false;
var a = require('./a.js'); // a.js代码就停在这里，等待b.js执行完毕，再往下执行。
console.log('在 b.js 之中，a.done = %j', a.done);
exports.done = true;
console.log('b.js 执行完毕');
上面代码之中，b.js执行到第二行，就会去加载a.js，这时，就发生了“循环加载”。系统会去a.js模块对应对象的exports属性取值，可是因为a.js还没有执行完，从exports属性只能取回已经执行的部分，而不是最后的值。
a.js已经执行的部分，只有一行。
exports.done = false;
因此，对于b.js来说，它从a.js只输入一个变量done，值为false。
然后，b.js接着往下执行，等到全部执行完毕，再把执行权交还给a.js。于是，a.js接着往下执行，直到执行完毕。我们写一个脚本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);
执行main.js，运行结果如下。
$ 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
上面的代码证明了两件事。一是，在b.js之中，a.js没有执行完毕，只执行了第一行。二是，main.js执行到第二行时，不会再次执行b.js，而是输出缓存的b.js的执行结果，即它的第四行。
exports.done = true;
总之，CommonJS 输入的是被输出值的拷贝，不是引用(引用一改全改，上面的done都该为true)。
由于 CommonJS 模块遇到循环加载时，返回的是当前已经执行的部分的值，而不是代码全部执行后的值，两者可能会有差异。所以，输入变量的时候，必须非常小心。
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';
// 结果
// ReferenceError: foo is not defined流程：
- 首先，执行
a.mjs以后，引擎发现它加载了b.mjs，因此会优先执行b.mjs，然后再执行a.mjs。 - 接着，执行
b.mjs的时候，已知它从a.mjs输入了foo接口（静态分析有foo接口 ），这时不会去执行a.mjs，而是认为这个接口已经存在了，继续往下执行。 - 执行到第三行
console.log(foo)的时候，才发现这个接口根本没定义，因此报错。
解决方法：（利用函数提升）
// a.mjs
import {bar} from './b'; //在执行此处时，函数foo就已经有定义了，所以b.mjs加载的时候不会报错。
console.log('a.mjs');
console.log(bar());
function foo() { return 'foo' } // 利用函数提升
export {foo};
// b.mjs
import {foo} from './a';
console.log('b.mjs');
console.log(foo());
function bar() { return 'bar' }
export {bar};ES6 module transpiler
转码器
SystemJS
它是一个垫片库（polyfill），可以在浏览器内加载 ES6 模块、AMD 模块和 CommonJS 模块，将其转为 ES5 格式。它在后台调用的是 Google 的 Traceur 转码器。