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