commonJS和ESmodules差异

参考资料：

ES6模块与CommonJS的区别

export 和 export default 的区别

总结：

• commonJS模块输入的是一个值的拷贝，ES6模块输出的是值的引用（所以重新对其赋值）。
• commonJS模块是运行时加载（同步），ES6模块是编译时输出接口（异步）。
• 涉及相关问题：
  • webpack中的webpack_require对他们处理方式不同
  • webpack的按需加载实现

用法的区别：

//commonJS导出一个对象
module.exports={ name:name,age:age }
let xx=require('./index')
//ES modules导出一个对象
export { name:name,age:age }
import { name,age } from './index'//不能任意命名，只能解构赋值

export default { name:name,age:age }
import xx from './index'//导入的对象可以任意取名

commonJS：

commonJS是node中遵循的规范（同步加载模块）

commonJS模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化不会影响到这个值。

// common.js
var count = 1;
var printCount = () =>{ 
   return ++count;
}
module.exports = {
     printCount: printCount,
     count: count  /**/
};
 // index.js
let v = require('./common');
//commonJS是值的拷贝，可以进行修改
console.log(v.count); // 1
console.log(v.printCount()); // 2
console.log(v.count); // 1

改写：通过导出get value()来实现。

// common.js
var count = 1;
var printCount = () =>{ 
   return ++count;
}
module.exports = {
     printCount: printCount,
     get count(){  /*改写*/
         return count
     }
};
 // index.js
let v = require('./common');
//commonJS是值的拷贝，可以进行修改
console.log(v.count); // 1
console.log(v.printCount()); // 2
console.log(v.count); // 2

ES modules：

在ES modules中使用export和import就可以直接实现。ES6模块是动态引用，并且不会缓存，模块里面的便令绑定其所在的模块，而是动态地去加载值，并且不能对其重新赋值

// es6.js
export let count = 1;
export function printCount() {
     ++count;
}
// main1.js
import  { count, printCount } from './es6';
console.log(count)//1
console.log(printCount());//2
console.log(count)//2