JavaScript模块化中，ES Modules与CommonJS的互操作性有哪些陷阱？-js教程-PHP中文网

JavaScript模块化中，ES Modules与CommonJS的互操作性有哪些陷阱？

betcha

发布： 2025-10-02 08:02:02

原创

345人浏览过

ESM默认导出在CommonJS中需通过default属性访问；2. ESM命名导出在require中不可直接使用；3. CommonJS模块被ESM import时作为default导入；4. 循环依赖在两者间行为不一致，易引发运行时错误。

javascript模块化中，es modules与commonjs的互操作性有哪些陷阱？

在现代JavaScript开发中，ES Modules（ESM）和CommonJS（CJS）是两种主流的模块系统。虽然Node.js已支持两者共存，但它们之间的互操作性存在一些容易被忽视的问题。理解这些陷阱有助于避免运行时错误或打包异常。

默认导出与require的兼容问题

ESM中的默认导出在被CommonJS通过require引入时，行为可能不符合预期。

例如，一个ESM文件：

// math.mjs
export default function add(a, b) {
  return a + b;
}

登录后复制

在CommonJS中引入：

立即学习“Java免费学习笔记（深入）”；

// app.cjs
const add = require('./math.mjs');
console.log(add); // 输出：{ default: [Function: add] }

登录后复制

你不能直接调用add(1, 2)，因为整个模块被包装在default属性下。必须使用add.default(1, 2)才能正确调用。

命名导出在require中不可直接访问

如果ESM使用命名导出：

// utils.mjs
export const PI = 3.14;
export function square(x) { return x * x; }

登录后复制

在CommonJS中：

有道小P

有道小P，新一代AI全科学习助手，在学习中遇到任何问题都可以问我。

查看详情

const utils = require('./utils.mjs');
console.log(utils.PI);        // undefined
console.log(utils.square);    // undefined
console.log(utils);           // {}

登录后复制

这通常是因为ESM模块没有提供正确的命名空间映射。某些情况下Node.js会尝试合成命名空间，但行为不稳定，尤其在动态加载或打包工具中。

CJS模块被import时返回default

当使用ESM语法导入CommonJS模块时，整个模块对象会成为default导出。

// legacy.js
module.exports = { foo: 'bar' };
<p>// index.mjs
import stuff from './legacy.js';
console.log(stuff.foo); // 正确：'bar'</p><p>import { foo } from './legacy.js'; // 错误！</p>

登录后复制

这种写法会报错，因为CommonJS没有原生的命名导出机制。你需要始终通过default导入整个对象，再解构使用。