module 和 commonJS

ES6 模块与 CommonJS 模块的差异

• CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用
  ○ CommonJS 模块一旦输出一个值，模块内部的变化就影响不到这个值。除非输出一个可以返回内部值的函数,才能得到内部变动后的值。
  ○ ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。（JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。原始值变了，import加载的值也会跟着变。）
• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口
  ○ 因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
• CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段

代码阅读

//commonJS
//./a.js
let count = 1;

setCount = () => {
  count++;
}

setTimeout(() => {
  console.log('a', count)
}, 1000);

module.exports = {
  count,
  setCount
}

//./b.js
const obj = require('./a.js');

obj.setCount();

console.log('b', obj.count)

setTimeout(() => {
  console.log('b next', obj.count);
}, 2000);

输出是
b 1
a 2
b next 1

//es6 模块
//./a.js
let count = 1;

let setCount = () => {
  count++;
}

setTimeout(() => {
  console.log('a', count)
}, 1000);

export { count, setCount }

//./b.js
import * as obj from "./a.js";
obj.setCount();

console.log('b', obj.count)

setTimeout(() => {
  console.log('b next', obj.count);
}, 2000);

b 2
a 2
b next 2