1. 语法
commonjs使用module.exports、exports导出,require导入;
ES6使用export导出,import导入。
2. 加载时机
cmj是运行时加载
esm在静态编译期间就确定了模块的依赖
3. 导出的 值类型
esm 导出的是值的引用,cmj导出的是值的拷贝(cmj导出的值有缓存)
ES6 Module 示例
模块文件 (counter.js):
// ES6 Module
export let count = 0;
export function increment() {
count++;
}
主文件:
// ES6 Module
import { count, increment } from './counter.js';
console.log(count); // 输出 0
increment();
console.log(count); // 输出 1,因为 count 是引用
ES6 Module 示例中,counter.js 模块内部的 count 值发生了改变,并且这个改变反映到了导入该模块的文件中。这是因为在 ES6 Module 中,导出的是值的引用,所以内部修改可以同步到外部。
CommonJS 示例
模块文件 (counter.js):
// CommonJS
let count = 0;
function increment() {
count++;
}
module.exports = {
count,
increment
};
主文件:
// CommonJS
const counterModule = require('./counter.js');
console.log(counterModule.count); // 输出 0
counterModule.increment();
console.log(counterModule.count); // 仍然输出 0,因为 count 是值拷贝
CommonJS 示例中,尽管 counter.js 模块内部的 count 值发生了改变,但由于 count 是作为值拷贝导出的,所以在 require 它的文件中,count 的值并不会更新。