ES6模块和Commonjs的差异

ES6模块和Commonjs的差异

• CommonJS 是 nodejs 中的模块化工具，只能使用在服务器端，而ES6模块是 客户端开发的模块化工具，只能使用在客户端

• CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

CommonJS

// module.js
  let count = 3;
const doCount = function(){
     
    count ++;
}
module.exports = {
     count, doCount};
// main.js
let obj = require('./CommonJSModule.js');
console.log(obj.count); // 3
obj.doCount();
console.log(obj.count); // 3

变量count没有改变，所以count是拷贝了值

ES6模块

// module.js
let count = 3;
function doCount(){
     
    count ++;
}
export {
     count, doCount}; // 导出一个对象

// main.js
import {
     count, doCount} from './ES6module.js'; // 属性的解构赋值
console.log(count); // 3
doCount(); // count ++
console.log(count); // 4

变量count发生了改变，所以count是引用的

• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

  // ES6语法
   if(condition){
     
        import ....
    }else{
     
        import ....
    }
    // 报错

    // CommonJS语法
    if(condition){
     
        require('module1') 
    }else{
     
        require('module2')
    }
    // 允许

• CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段。
• CommonJS 导入的一定是一个对象，但可以使用一个对象变量接受，也可以使用解构赋值，但前者更加常用，ES6一般返回一个对象，一般使用{}解构赋值接收，当然也可以使用 * 接受真的对象, 当有一个default值时，直接返回default,不确定是不是对象

  // ES6模块语法
  // 解构赋值
  import {
     db, users} from './constants/index.js';
  //  * 作为对象
  import * as obj from './ES6module.js'
  // default
  import mydefault from './default.js';

  // Commonjs语法
  const http = require('http');
  const {
     get,post} = require('./axios');