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');

上一篇:exports与module.exports,export与export default 之间的关系和区别


下一篇:搭建清晰的前端技术体系