别慌！ESM项目导入CJS模块出错了？别担心，这几个坑你得知道！

我傻了。 嘿，各位开发者朋友们，是不是有时候在搞ESM项目的时候，突然发现导入CJS模块的时候报错了？比如TypeError: TestClass is not a constructor之类的？别慌！这种情况其实很常见，但只要掌握一些技巧就能轻松解决。今天咱们就来聊聊这个问题，保证让你不再为这种错误抓狂！

为什么会这样？

之前咱们用的都是ESM，它跟老版本的JavaScript模块化方式CJS有点不一样。简单ESM是现代化的，静态分析好做，但它对CJS的默认导出处理得有点特殊。

• ESM对CJS默认导出的理解： ESM加载一个CJS模块的时候，默认导出并不是直接变成构造函数。而是把整个CJS模块当成一个对象来处理，然后把默认导出包装在default属性里。
• 导致的问题： 你直接用new TestClass去实例化的时候， ESM会认为TestClass不是构造函数了所以报错！

案例分析：没上学也能看懂的例子

假设你有个项目结构如下：

出道即巅峰。 myproject/ ├── src/ │ └── main.js └── node_modules/ └── testpackage/ ├── index.cjs // CJS文件 └── dist/ // 预编译后的文件

你的 main.js 文件可能这样写：

javascript import TestClass from 'testpackage'; // ESM导入 const instance = new TestClass; // 出错啦! console.log;，挖野菜。

行吧... 这段代码是不是会报错？主要原因是 TestClass 在 ESM 环境下被包装成了 { default: TestClass }, 而不是直接的构造函数。

三种解决办法

下面我们来看看几种常见的解决方法：

1. 访问 .default 属性: 这是最常用的方法！ 直接用 .default 来获取实际的构造函数即可，那必须的！。

   记住这个方法！以后遇到类似问题可以先试试这个，原来小丑是我。。

2. 统一模块格式 : 如果你的项目和依赖库都能接受的话，最好统一使用 ESM 格式。这样可以避免很多兼容性问题。 如果你的依赖包已经做了 ESM 输出, 那就直接 import 即可, 不需要额外的处理.

3. 使用 createRequire 函数: 这个方法比较高级一点点, 但也很有用. 它允许你在 ESM 中创建一个 CJS 的 require 函数, 然后用它来加载 CJS 模块. 但是需要注意, 即使用了 createRequire, 如果你的 CJS 模块是通过实现的 , 那么仍然需要通过 .default 来访问默认导出. 这个方法主要用于那些需要显式地以 CJS 方式加载特定 CJS 模块的情况 ，佛系。。

项目配置和工具的使用

• TypeScript 的 Module Resolution: 如果你使用 TypeScript, 可以尝试设置 moduleResolution: "nodenext" ，这样可以在编译时捕获到一些错误信息, 比方说 TS2351: This expression is not constructable 。 这能帮你提前发现问题!

• Node Package Manager 的 exports: 在打包依赖包时 , 可以使用 npm 的 exports 配置来明确指定哪些内容是公开的 。 呵... 这有助于确保依赖包在不同的环境下都能正确地被导入和使用。

代码示例和配置说明

注意事项

• 检查依赖包: 有时候报错是主要原因是依赖包本身使用的格式不一致导致的。确认你的依赖包是否支持 ESM 或者 CJS 输出。 如果是旧版本库不支持ESM格式的话, 可能需要修改依赖包或者转换成兼容的版本 。
• Typescript 类型检查: 使用 Typescript 时, 可以配置类型检查器来确保 import 和 export 的正确性 。 如果配置正确的话 , 类型检查器可以帮助你避免类似的问题 .

总而言之 , 当你在 ES Module 项目中遇到 CommonJS 模块时 , 不要害怕! 理解它们之间的差异以及正确的解决方法 , 你就可以轻松应对各种挑战 。 希望这篇文章能帮到你 ,祝你编码愉快! 😊🚀，来一波...