ES6和CommonJs的区别

1、CommonJS是运行时候加载，ES6模块是编译的时候输出接口
2、CommonJS是require()同步加载模块，ES6模块是import命令是异步加载，有一个独立的模块依赖的解析阶段
3、CommonJS模块输出是一个值的拷贝，ES6模块输出的值是引用

一、CommonJs模块输出一个值的拷贝，ES6模块输出值的引用
1、commonJs
CommonJS是一个值的拷贝也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。

//demo.js
var a=3;
function add(){
  a++;
}
module.exports={
  ...a,
  add:add,
}

上面代码输出内部变量a和内部方法add(),add()方法改变a变量。然后，在main.js里面加载这个模块。

// main.js
var result=require('./demo')
console.log(result.a);  //3
result.add();
console.log(result.a); //3

输出结果：a值没有改变，这是因为result.a是一个原始类型的值，会被存入缓存。除非写成一个函数，才能得到内部变动后的值。
例如改写成下面的模式：

var a = 3;
function add() {
  a++;
}

module.exports = {
  get a() {
    return a
  },
  add: add,
}

2、ES6 模块 （module）
ES6 模块是引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

export var a='bar';
setTimeout(() => {
  a='cdc'
}, 1000);

import {a} from './demo1.js'
console.log(a);  
setTimeout(() => {
  console.log(a)
}, 1000);
//结果：
//bar
//cdc

二、CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
commonJs运行时加载，是因为commonJs加载的是一个对象，该对象只有在脚步运行完是才会加载。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
三、CommonJS是require()同步加载模块，ES6模块是import命令是异步加载，有一个独立的模块依赖的解析阶段

四、一些注意
1、export
export 后面不可以跟一个引用变量（由于是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构–官网） ，所以后面是声明(var function 这样的关键字)或者{ }
错误写法

// 报错
export 1;

// 报错
var m = 1;
export m;

// 报错
function f() {}
export f;

正确写法

//1
export var a=1;
//2
export var f=()=>{
  console.log(1);
}
//3
var b=2;
export {b}
//4
export function f(){
  console.log(2)
}
//5
function f(){
  console.log(3)
}
export {f}
//6
var c=4;
export{c as d}

2、export default
因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。

// 正确
export var a = 1;

// 正确
var a = 1;
export default a;

// 错误
export default var a = 1;

3、module.exports

//demo.js
exports.a=2;
//重新赋值一个新对象，覆盖上面的
module.exports={
  b:20
}

const result=require('./demo.js')
console.log('result' ,result)  //result:{ score: 100 }

正确使用

// moduleA.js
module.exports.name = "I am moduleA";
exports.age = 20;

// index.js
const moduleA = require("./moduleA.js");
console.log("moduleA: ", moduleA); // moduleA:  { name: 'I am moduleA', age: 20 }