commonjs和es module的区别

189 阅读1分钟

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 的值并不会更新。

4. 循环导入原理