ES6 module export和import
1、为什么有模块概念
历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。
在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。
2、export导出模块
export语法声明用于导出函数、对象、指定文件（或模块）的原始值。
注意：在node中使用的是exports,不要混淆了
export有两种模块导出方式：命名式导出（名称导出）和默认导出（定义式导出），命名式导出每个模块可以多个，而默认导出每个模块仅一个。
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;- name1… nameN－导出的“标识符”。导出后，可以通过这个“标识符”在另一个模块中使用import引用
- default－设置模块的默认导出。设置后import不通过“标识符”而直接引用默认导入，需要注意的是，这时import命令后面，不使用大括号。
- *继承模块并导出继承模块所有的方法和属性
- as－重命名导出“标识符”
- from－从已经存在的模块、脚本文件…导出
命名式导出
模块可以通过export前缀关键词声明导出对象，导出对象可以是多个。这些导出对象用名称进行区分，称之为命名式导出。
export { myFunction }; // 导出一个已定义的函数
export const foo = Math.sqrt(2); // 导出一个常量
export function multiply(x, y) {
return x * y;
};var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};我们可以使用*和from关键字来实现的模块的继承：
export * from 'article';模块导出时，可以指定模块的导出成员。导出成员可以认为是类中的公有对象，而非导出成员可以认为是类中的私有对象：
var name = 'IT笔录';
var domain = 'http://itbilu.com';
export {name, domain}; // 相当于导出{name:name,domain:domain}模块导出时，我们可以使用as关键字对导出成员进行重命名：
var name = 'IT笔录';
var domain = 'http://itbilu.com';
export {name as siteName, domain};注意，下面的语法有严重错误的情况：
// 错误演示
export 1; // 绝对不可以
var a = 100;
export a;export在导出接口的时候，必须与模块内部的变量具有一一对应的关系。直接导出1没有任何意义，也不可能在import的时候有一个变量与之对应
export a虽然看上去成立，但是a的值是一个数字，根本无法完成解构，因此必须写成export {a}的形式。即使a被赋值为一个function，也是不允许的。而且，大部分风格都建议，模块中最好在末尾用一个export导出所有的接口，例如：
export {fun as default,a,b,c};下面是正确的写法：
// 写法一
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};默认导出
使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。
为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。
// export-default.js
export default function () {
console.log('foo');
}上面代码是一个模块文件export-default.js，它的默认输出是一个函数。
其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。
// import-default.js
import customName from './export-default';
customName(); // 'foo'上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。
export default命令用在非匿名函数前，也是可以的。
// export-default.js
export default function foo() {
console.log('foo');
}
// 或者写成
function foo() {
console.log('foo');
}
export default foo;上面代码中，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。
命名式导出与默认导出
默认导出可以理解为另一种形式的命名导出，默认导出可以认为是使用了default名称的命名导出。
下面两种导出方式是等价的：
const D = 123;
export default D;
export { D as default };export使用示例
使用名称导出一个模块时：
// "my-module.js" 模块
export function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { foo };在另一个模块（脚本文件）中，我们可以像下面这样引用：
import { cube, foo } from 'my-module';
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888使用默认导出一个模块时：
// "my-module.js"模块
export default function (x) {
return x * x * x;
}在另一个模块（脚本文件）中，我们可以像下面这样引用，相对名称导出来说使用更为简单：
// 引用 "my-module.js"模块
import cube from 'my-module';
console.log(cube(3)); // 273、import引入模块
import语法声明用于从已导出的模块、脚本中导入函数、对象、指定文件（或模块）的原始值。
import模块导入与export模块导出功能相对应，也存在两种模块导入方式：命名式导入（名称导入）和默认导入（定义式导入）。
import的语法跟require不同，而且import必须放在文件的最开始，且前面不允许有其他逻辑代码，这和其他所有编程语言风格一致。
import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";- name－从将要导入模块中收到的导出值的名称
- member, memberN－从导出模块，导入指定名称的多个成员
- defaultMember－从导出模块，导入默认导出成员
- alias, aliasN－别名，对指定导入成员进行的重命名
- module-name－要导入的模块。是一个文件名
- as－重命名导入成员名称（“标识符”）
- from－从已经存在的模块、脚本文件等导入
命名式导入
我们可以通过指定名称，就是将这些成员插入到当作用域中。导出时，可以导入单个成员或多个成员：
注意，花括号里面的变量与export后面的变量一一对应
import {myMember} from "my-module";
import {foo, bar} from "my-module";通过*符号，我们可以导入模块中的全部属性和方法。当导入模块全部导出内容时，就是将导出模块（’my-module.js’）所有的导出绑定内容，插入到当前模块（’myModule’）的作用域中：
import * as myModule from "my-module";导入模块对象时，也可以使用as对导入成员重命名，以方便在当前模块内使用：
import {reallyReallyLongModuleMemberName as shortName} from "my-module";导入多个成员时，同样可以使用别名：
import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module";导入一个模块，但不进行任何绑定：
import "my-module";上面代码仅仅执行my-module模块，但是不输入任何值
默认导入
在模块导出时，可能会存在默认导出。同样的，在导入时可以使用import指令导出这些默认值。
直接导入默认值：
import myDefault from "my-module";也可以在命名空间导入和名称导入中，同时使用默认导入：
import myDefault, * as myModule from "my-module"; // myModule 做为命名空间使用或
import myDefault, {foo, bar} from "my-module"; // 指定成员导入import使用示例
// --file.js--
function getJSON(url, callback) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
callback(this.responseText)
};
xhr.open("GET", url, true);
xhr.send();
}
export function getUsefulContents(url, callback) {
getJSON(url, data => callback(JSON.parse(data)));
}
// --main.js--
import { getUsefulContents } from "file";
getUsefulContents("http://itbilu.com", data => {
doSomethingUseful(data);
});4、default关键字
// d.js
export default function() {}// 等效于：
function a() {};
export {a as default};在import的时候，可以这样用：
import a from './d';
// 等效于，或者说就是下面这种写法的简写，是同一个意思
import {default as a} from './d';这个语法糖的好处就是import的时候，可以省去花括号{}。
简单的说，如果import的时候，你发现某个变量没有花括号括起来（没有*号），那么你在脑海中应该把它还原成有花括号的as语法。
所以，下面这种写法你也应该理解了吧：
import $,{each,map} from 'jquery';
// import后面第一个$是{defalut as $}的替代写法。5、as关键字
as简单的说就是取一个别名,export中可以用，import中其实可以用：
// a.js
var a = function() {};
export {a as fun};
// b.js
import {fun as a} from './a';
a();上面这段代码，export的时候，对外提供的接口是fun，它是a.js内部a这个函数的别名，但是在模块外面，认不到a，只能认到fun。
import中的as就很简单，就是你在使用模块里面的方法的时候，给这个方法取一个别名，好在当前的文件里面使用。之所以是这样，是因为有的时候不同的两个模块可能通过相同的接口，比如有一个c.js也通过了fun这个接口：
// c.js
export function fun() {};如果在b.js中同时使用a和c这两个模块，就必须想办法解决接口重名的问题，as就解决了。
参考：
https://meiminjun.github.io/import%E5%92%8Cexport%E7%AC%94%E8%AE%B0/