ES6模块化

1.产生背景：

在程序的开发中，模块化开发一直是一种比较好的方案，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块就行了，常见的流行语言基本都已经支持或者变相支持，比如Python的import、 CSS 都有@import。但是，一直以来Javascript没有模块化支持，面对复杂的项目，会变得十分被动，其实在ES6以前，它连”类”（class）都不支持，更别提什么”模块”（module）的概念了。
后来Javascript社区试图在当时的条件下实现”模块”的效果。方法有各种，也各有优缺点。有几种规范渐渐成为主流，如:（CommonJS、AMD、CMD），成为了很多开发者的首选。不过这些JavaScript官方一直没有提出一套表准的方案。具体来说过程：在很长的一点时间中，前端开发的复杂程度有限，没有模块也是可以的。不过在2009年，大佬Ryan Dahl创建了node.js项目，将Javascript语言用于服务器端编程。在服务器端，一定要有模块与操作系统和其它应用程序互动，否则基本没法编程。因此，要开发Nodejs，就需要提出一个模块化的规范，这个规范就是CommonJS规范，然后Nodejs就是基于该规范实现的模块化。
在CommonJS中,暴露模块使用module.exports和exports，同时还有一个全局性方法require() ，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。

//加载模块
var xx = require('math');
//调用模块提供的方法
m.add(1,2);

有了模块化后，让JavaScript的大规模工程成为可能。受服务端模块化思想的影响，客户端开发也想要模块化，这就有了后来的AMD规范(require.js)和CMD规范(sea.js)。无论是AMD还是CMD，都是使用require的方式来进行引用模块的，他们的区别主要是对依赖模块的执行时机不同。可以说require统治了ES6之前的所有模块化编程，即使到目前位置ES6尚未被浏览器完全支持，require方式依然有很多人在使用它。
ES6标准发布后，官方提出了一套模块化标准，是以export指令导出接口，以import引入模块，第一次在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。但是在我们一贯的nodejs模块中，CommonJS规范依然可以使用，使用require引入模块，使用exports导出接口。注意一个是exports,一个是module.exports。那下面就简单介绍一下CommonJS的规范。
CommonJS模块规范
我们知道，Nodejs的模块化采用的是该规范。根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。
比如，我们新建个example.js：

var xxx = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

上面的代码其实就是向外暴露除了变量x和函数addX，其它使用者可以通过加载模块的形式使用它们。比如：

//导入模块
var example = require('./example.js');
// 使用模块暴露出来的变量和函数
console.log(example.x);
console.log(example.addX(1));

exports 与 module.exports
NodeJS为每个模块提供一个exports变量，指向module.exports, 如：

var exports = module.exports;

于是我们可以直接在exports变量上添加方法，表示对外输出的接口，如同在module.exports上添加一样。不过不能直接给exports变量赋值。

var xs = 5;
//下面两句是被允许的
module.exports.xs = xs;
exports.xa = xs;

//下面这句不被允许
exports = 6;

2.ES6模块规范

在ES6模块规范中，使用export和import来导出、导入模块。同时ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";

导出如：

//以下内容编写在a.js中

// 写法1
var xxx = 'taobao.com';
var yyy = 'jingdong.com';
export {xxx, yyy};

// 写法2
export var xxx = 'taobao.com';

// 写法3
var xxx = 'taobao.com';
// ss 是取别名的s，在import的时候也能用
export {xxx ss yyy};

除了export之外，还有一个export default，该命令用于为模块指定默认输出，如下：

export default function () {
  console.log('taobao.com');
}

export default和export的区别与联系？

1. export与export default均可用于导出常量、函数、文件、模块等。
2. 在一个文件或模块中，export可以有多个，export default仅有一个。
3. 通过export方式导出，在导入时要加{}，export default导出的不需要加{}。
4. 也可以这么理解：export是指定名称导出，export default是不指定名称导出。

导入如：
import命令会被 JavaScript 引擎静态分析，优先于模块内的其他语句执行，因此我们一般写在文件的最前面。写个模块的例子，比如我们写个模块，它叫test.js。内容如下：

//将该变量暴露出去
export var name = 'taobao.com';

//将该函数暴露出去
export function say(x) {
    console.log(`我说的内容是${x}`);
}

// 将该类暴露出去
export class Human{
    run(x){
        console.log(`我吃的很多，一会就吃了${x}碗`);
    }
}

// 该函数没有被暴露出去，不能直接被其它文件导入
function speak() {
    console.log(`我说的是汉语`);
}
console.log('我张的好帅啊！');

接下来再写导入模块

//导入模块并立即执行，不会导入任何变量
//其实就是从头到尾执行引入的js文件，会忽略js文件里export。
import './test.js';

// 导入后使用
import {name, say as XX, Human} from './test.js';
console.log(name);
XX('hello啊');
var h = new Human();
h.run(1000);

如果使用的是export default 导出的话，那应该这样用如下：

//test.js的内容
//将该变量暴露出去
export var name = 'taobao.com';
// 将该类暴露出去
export default class Human{
    run(x){
        console.log(`我吃的很多，一会就吃了${x}碗`);
    }
}

使用的时候其实可以这样做如下：

//原有的导入方式依然可以使用
import {name} from './test.js';
console.log(name)
//这个XXX可以是任意字符，接收的就是模块使用export default 导出的内容
import SS from './test.js';
var h = new SS();
h.run(1000);