从CJS导入时如何正确配置第三方库的.mjs文件？

问题核心在于ESM导入CJS模块时的互处理逻辑差异——开发环境和Vite生产构建的模块解析策略不同，直接解构命名导出会出现异常。要让index.mjs完整导出index.js的所有内容，你需要正确处理CJS到ESM的转换：

正确的index.mjs写法 #

// index.mjs
// 导入整个CJS模块的导出对象
const cjsExports = require('./index.js');

// 默认导出整个CJS对象，兼容`import Lib from 'third-party-lib'`的用法
export default cjsExports;

// 解构导出所有属性，兼容`import { ClassA, ClassB } from 'third-party-lib'`的用法
export const { ...allExports } = cjsExports;
// 若需要明确列出导出（可选）：
// export const { ClassA, ClassB, utilityFunc } = cjsExports;

为什么这个写法有效？ #

1. 由于库未设置"type": "module"，index.js属于CJS模块，其module.exports是一个完整的导出对象。用require导入可以直接拿到这个对象，避免工具链对命名导出的不一致解析。
2. 同时导出默认对象和命名属性，既保留了原有导入方式的兼容性，又确保所有CJS导出内容都能在ESM环境中被正确识别。

为什么之前的写法会出错？ #

直接import { ClassA } from './index.js'依赖Node.js的自动互处理逻辑——它会尝试从CJS的module.exports对象中提取命名导出，但Vite生产构建的优化（如tree-shaking、模块打包）会改变这种解析行为，导致ClassA被错误识别为非构造函数。而完整导入CJS对象再解构，能绕过这种不一致性。

替代方案（更符合ESM规范） #

如果不想使用require，可以用动态导入同步化（需Node.js 14+支持）：

// index.mjs
const cjsModule = await import('./index.js');
const cjsExports = cjsModule.default;
export default cjsExports;
export const { ...allExports } = cjsExports;

不过对于第三方库而言，第一种require的写法更稳妥，无需处理异步加载的潜在问题。

内容的提问来源于stack exchange，提问作者user1087973