ES6 module

Refer to Module的语法.

Introdution

ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

// CommonJS模块let { stat, exists, readFile } = require('fs');// 等同于let _fs = require('fs');let stat = _fs.stat;let exists = _fs.exists;let readfile = _fs.readfile;

上面代码的实质是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取3个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。
ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

// ES6模块import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载3个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。

Import & export

模块功能主要由两个命令构成：export和import。

Export

export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面两种export写法作用相同，后者更清晰可读。

// profile.jsexport var firstName = 'Michael';export var lastName = 'Jackson';export var year = 1958;// profile.jsvar firstName = 'Michael';var lastName = 'Jackson';var year = 1958;export {firstName, lastName, year};

export default 为模块指定默认输出（import该模块时就不能使用括号，可以自定义命名）。

Import

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。
上面代码的import命令，用于加载profile.js文件，并从中输入变量。import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。
如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。
import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。例如：

import {myMethod} from 'util';

上面代码中，util是模块文件名，由于不带有路径，必须通过配置，告诉引擎怎么取到这个模块。
import命令具有提升效果，会提升到整个模块的头部，首先执行。例如：

foo();import { foo } from 'my_module';

上面的代码不会报错，因为import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行之前。

由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。

import语句会执行所加载的模块，因此可以有下面的写法。

import 'lodash';

上面代码仅仅执行lodash模块，但是不输入任何值。如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。

Circular dependencies

如果代码中没有意识到引入了循环依赖，会导致出现ES6 module没有按自己认为的逻辑进行解释和执行脚本的情况。

// moduleA.jsimport { b } from 'moduleB.js'const a = 'a'console.log('module A executed')export { a }// moduleB.jsimport { a } from 'moduleA.js'const b = 'b'console.log('module B executed')export { b }// entry main.jsimport { b } from 'moduleB.js'