Vue项目中ESM兼容CommonJS（protobufjs）生产构建报错排查

ESM是JavaScript模块功能的标准规范，但npm上存在大量CommonJS包。Vite是处理CommonJS转ESM的常用工具，我在Vue项目中使用protobufjs包时，开发环境执行npm run dev完全正常，但执行npm run build生产构建时出现错误：

src/App.vue (13:21): "Enum" is not exported by "node_modules/.pnpm/protobufjs@7.4.0/node_modules/protobufjs/index.js", imported by "src/App.vue"

我曾按照Vite官方配置指南添加@rollup/plugin-commonjs配置，但问题依旧。后来了解到Vite默认在开发环境用esbuild、生产环境用@rollup/plugin-commonjs，不需要显式配置，想知道这个报错的原因是什么？

• protobufjs导出规范不匹配：protobufjs@7.x的CommonJS入口文件是通过module.exports = { Enum: ... }这种方式整体导出对象的，而非逐个导出exports.Enum = ...。Rollup的@rollup/plugin-commonjs在生产构建时，不会自动把这种整体导出的对象拆解为ESM的命名导出；但开发环境的esbuild兼容性处理更灵活，会隐式映射这些属性为命名导出，所以开发环境能正常运行。

• Vite前后端构建工具的处理逻辑差异：开发环境用的esbuild为了提升开发体验，对CommonJS模块的转换做了很多兼容处理，哪怕模块不是标准的ESM导出，也能尽可能让你用ESM的导入语法正常使用；而生产环境的Rollup更注重产物的规范性和体积优化，严格遵循转换规则，只处理符合特定格式的CommonJS导出，因此会出现找不到命名导出的错误。

• 显式配置未针对性调整：你之前添加@rollup/plugin-commonjs配置无效，是因为默认的插件配置不会强制处理这类整体导出的模块。如果要解决，需要给插件指定针对protobufjs的特殊规则，比如通过include指定该模块路径，或者开启transformMixedEsModules等参数来覆盖默认逻辑，但你没做这些针对性配置，所以问题依旧。

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