Electron-Vite项目中ESM模块支持问题的解决方案

问题背景

在Electron-Vite项目开发过程中，当开发者将package.json中的"type"字段设置为"module"时，会遇到一个常见问题：构建后preload脚本的扩展名自动变更为.mjs，导致运行时出现"Cannot find module out\preload\index.js"错误。这个问题源于Electron和Vite对ES模块(ESM)和CommonJS模块的不同处理方式。

技术原理分析

Electron-Vite是一个基于Vite的Electron项目构建工具，它结合了Vite的快速构建能力和Electron的跨平台桌面应用开发特性。当项目启用ES模块支持时，构建系统会自动将某些文件的扩展名改为.mjs，这是Node.js对ES模块的标准处理方式。

然而，Electron的主进程和预加载脚本(preload)对模块系统有特殊要求：

1. 预加载脚本必须使用CommonJS模块系统
2. 主进程默认也使用CommonJS
3. 渲染进程可以使用ES模块

解决方案

方案一：保持项目为CommonJS

最简单的解决方案是不将package.json中的"type"设为"module"，保持默认的CommonJS模块系统。这样所有文件都会保持.js扩展名，Electron能够正常加载preload脚本。

方案二：混合模块系统配置

如果项目确实需要使用ES模块，可以采用混合配置方式：

1. 在package.json中设置"type": "module"

2. 为preload脚本特别配置：

   // vite.config.js
   export default defineConfig({
     build: {
       rollupOptions: {
         output: {
           entryFileNames: `[name].js`,
           chunkFileNames: `[name].js`,
           assetFileNames: `[name].[ext]`
         }
       }
     }
   })
   

3. 或者在preload脚本的package.json同级目录中添加：

   {
     "type": "commonjs"
   }
   

方案三：显式指定文件扩展名

在创建BrowserWindow时，显式指定preload脚本的完整路径：

new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload/index.js')
  }
})

最佳实践建议

1. 对于Electron项目，除非有强烈需求，否则建议保持CommonJS模块系统
2. 如果必须使用ES模块，应该明确区分哪些部分需要使用ESM，哪些需要保持CJS
3. 注意Electron不同进程对模块系统的支持差异
4. 构建配置中应明确输出文件的命名规则

总结

Electron-Vite项目中模块系统的选择需要综合考虑Electron的特性和项目需求。理解Electron不同进程对模块系统的支持差异，合理配置构建工具，可以避免类似preload脚本加载失败的问题。通过适当的配置，开发者可以在享受ES模块现代特性的同时，确保Electron应用的稳定运行。