Electron Forge 中使用 Vite 模板时 electron-squirrel-startup 模块缺失问题的解决方案

问题背景

在使用 Electron Forge 构建桌面应用程序时，开发者可能会选择 Vite 或 Vite with TypeScript 作为项目模板。然而，当使用这些模板构建应用程序并尝试运行生成的 .exe 文件时，可能会遇到一个常见错误："Error: Cannot find module 'electron-squirrel-startup'"。

问题原因分析

这个问题的根源在于 Vite 和 Webpack 处理模块导入方式的差异。Electron Forge 默认生成的代码中使用的是 CommonJS 的 require() 语法来导入 electron-squirrel-startup 模块，但 Vite 主要设计用于处理 ES 模块（ESM）的 import 语法。

electron-squirrel-startup 是一个用于处理 Windows 平台上应用程序安装/卸载时创建/删除快捷方式的辅助模块。在 Webpack 模板中，由于其内置的模块处理能力，能够正确解析这个依赖，但在 Vite 模板中则会出现问题。

解决方案

方案一：使用 ES 模块导入语法

在项目的主进程文件（通常是 main.js 或 main.ts）中，将原来的 require() 语法替换为 ES 模块的 import 语法：

// 替换原来的 require('electron-squirrel-startup')
import started from 'electron-squirrel-startup';

// 处理 Windows 安装/卸载时的快捷方式
if (started) {
  app.quit();
}

方案二：TypeScript 项目的额外处理

对于使用 TypeScript 的项目，还需要安装类型定义文件以确保类型检查通过：

npm install --save-dev @types/electron-squirrel-startup

安装后，TypeScript 编译器将能够识别这个模块的类型定义。

方案三：等待官方修复

Electron Forge 团队已经意识到这个问题，并在后续版本中进行了修复。开发者可以关注项目更新，在未来的版本中这个问题将得到彻底解决。

深入理解

Vite 作为新一代前端构建工具，采用了原生 ES 模块的方式，这与传统的 Webpack 处理方式有所不同。在 Electron 项目中，主进程代码通常使用 CommonJS 模块系统，而渲染进程则可以使用 ES 模块。这种混合使用的情况可能导致一些兼容性问题。

electron-squirrel-startup 模块本身是一个 CommonJS 模块，当使用 Vite 构建时，需要确保构建系统能够正确处理这种模块格式。上述解决方案通过显式使用 ES 模块的导入语法，让 Vite 能够正确打包这个依赖。

最佳实践建议

1. 保持依赖更新：定期检查 Electron Forge 和相关插件的更新，许多兼容性问题会在新版本中得到修复。

2. 统一模块系统：在可能的情况下，尽量统一项目中的模块系统，要么全部使用 ES 模块，要么全部使用 CommonJS。

3. 类型安全：对于 TypeScript 项目，确保所有依赖都有对应的类型定义，这能提前发现许多潜在问题。

4. 构建测试：在发布前，始终测试构建后的应用程序，而不仅仅是开发环境下的运行情况。

通过理解问题的本质并采用适当的解决方案，开发者可以顺利地在 Electron Forge 中使用 Vite 模板构建高质量的桌面应用程序。