ES6模块与CommonJS对比分析_如何在项目中混合使用

新闻中心 NEWS CENTER

2025-12-03

浏览次数：次

ES6模块使用import/export，支持静态分析，CommonJS用require/module.exports，运行时加载；ESM可直接引入CJS，CJS需通过动态导入调用ESM，文件扩展名或package.json决定模块类型，推荐新项目用ESM，结合工具实现兼容。

es6模块与commonjs对比分析_如何在项目中混合使用

ES6模块（ESM）和CommonJS（CJS）是J*aScript中两种主流的模块系统，分别在现代浏览器与Node.js早期版本中广泛使用。随着Node.js对ES6模块的支持逐步完善，开发者常面临两者共存的场景。理解它们的差异并掌握混合使用的方法，对项目开发至关重要。

语法不同：
- ES6模块使用 import 和 export 语法，支持静态分析，编译时确定依赖关系。
- CommonJS 使用 require() 和 module.exports，运行时加载模块，动态引入。

加载机制不同：
- ESM 是异步加载，支持顶层 await，模块只执行一次，结果被缓存。
- CJS 是同步加载，适合服务器端文件读取，但无法直接用于浏览器异步环境。

值的引用方式不同：
- ESM 导出的是绑定（binding），原始值变化后，导入处能感知更新。
- CJS 导出的是值的拷贝（执行时的快照），后续修改不影响已导入的结果。

Node.js 支持同时使用ESM和CJS，但需注意以下几点：

文件扩展名决定模块类型：.mjs 文件默认为ESM，.cjs 为CommonJS，.js 文件需在 package.json 中设置 "type": "module" 才启用ESM。
ESM 中可以直接 import CommonJS 模块，Node.js 会自动将其作为默认导出处理。
CJS 不能直接 require ESM 模块，因为ESM加载是异步的。若强行 require 会报错。

例如：

// math.cjs
module.exports = { add: (a, b) => a + b };

// main.mjs
import math from './math.cjs'; // 可以正常导入
console.log(math.add(2, 3)); // 输出 5

但反过来则不可行：

Tunee AI

新一代AI音乐智能体

1104 查看详情 Tunee AI

// utils.mjs
export const greet = () => 'Hello';

// app.cjs
const utils = require('./utils.mjs'); // 运行时报错：Cannot use import statement outside a module

在实际项目中，可通过以下方式平滑过渡或共存：