require和ES6 import的区别

js模块化的进程里，出现了不少模块化的方案，commonjs，requirejs(AMD),CMD。随着ES6标准的发布，import/export的规范也被普遍使用了。只是浏览器的支持程度不高，须要配合转码工具使用。ES6的模块化和以前社区的commonjs模块化到底有什么区别呢？

Commonjs的require和module.exports

• require是个函数，动态加载，也所以

1.require导入是在运行时，理论上能够在任意地方调用require导入模块;
2.require()的路径能够是表达式：require('/app' + '/index');
3.require导出的是 module.exports对象
4.exports是对module.exports的一个引用，当module.exports指向变化，exports导出就会出问题了

• require返回对应module.exports对象的浅拷贝

1.若是是module.exports里的基本类型的值，会获得该值的副本
2.若是是module.exports里的对象类型的值，会获得该值的引用

ES6的import和export

• import在编译时肯定导入

1.路径只能是字符串常量
2.import会被提高到文件最顶部
3.导入的变量是只读的

• import导入的是值引用，而不是值拷贝

1.模块内部值发生变化，会对应影响到引用的地方
2.import导入与导出须要有一一映射关系，相似解构赋值。

代码说明一下二者的区别

Commonjs

// a.js
let a = 0;
const count = () => {
    a++;
}
setTimeout(function(){
    a++;
    console.log('in module the a is ' + a);
}, 500);
module.exports = {
    a,
    count,
};

// b.js
let foo = require('a.js');
foo.count();
setTimeout(function(){
    console.log('in require the a is ' + foo.a);
}, 1000);

// 输出
// in the module the a is 2
// in the require the a is 0

由于foo是一份浅拷贝，因此a是require导入时export里a的值；而count是一个函数，foo.count是这个函数的一个引用，因此调用时做用域是它声明处同样，也就是它修改的a是exports里的，而不是foo.a。

Es6 module

// a.js
let a = 0;
const count = () => {
    a++;
}
setTimeout(function(){
    a++;
    console.log('in module the a is ' + a);
}, 500);
export {
    a,
    count,
};

// b.js
import { a, count } from 'a.js';
count();
setTimeout(function(){
    console.log('in require the a is ' + a);
}, 1000);

// 输出
// in the module the a is 2
// in the require the a is 2

能够看出，很重要的一个区别就是一个基本值是否会同步变化，