Electron Forge 项目调试时 Sourcemap 加载问题解析

问题背景

在使用 Electron Forge 结合 Vite 和 TypeScript 模板创建的项目中，开发者发现当尝试通过 Chrome Dev Tools 调试主进程时，源代码映射(sourcemap)未能正确加载。这导致调试时无法直接查看和跟踪原始 TypeScript 代码，而是只能看到编译后的 JavaScript 代码，极大地影响了调试体验。

问题重现

该问题非常容易重现，只需以下步骤：

1. 使用 Vite + TypeScript 模板创建一个新的 Electron Forge 项目
2. 在 package.json 中添加调试脚本
3. 启动调试会话

根本原因

经过分析，问题的根源在于 Vite 配置中缺少必要的 sourcemap 输出设置。虽然项目使用了 TypeScript，但默认配置没有启用 sourcemap 生成，导致调试工具无法将编译后的代码映射回原始代码。

解决方案

要解决这个问题，需要在 Vite 的主进程配置文件(vite.main.config.mjs)中添加以下配置：

defineConfig({
  build: {
    rollupOptions: {
      output: {
        sourcemap: true,
      },
    },
  },
});

这个配置会强制 Rollup(由 Vite 内部使用)在构建过程中生成 sourcemap 文件。这些 sourcemap 文件包含了编译后代码与原始代码之间的映射关系，使得调试工具能够正确显示原始 TypeScript 代码。

最佳实践建议

1. 开发环境配置：建议在开发环境中默认启用 sourcemap 生成，这可以显著提升调试体验
2. 生产环境配置：在生产环境中可以考虑禁用 sourcemap 以减少包体积和提高安全性
3. 配置分离：可以通过环境变量区分开发和生产环境的配置，实现自动化的 sourcemap 管理

未来改进方向

Electron Forge 团队已经意识到这个问题，并计划在未来的版本中改进 sourcemap 的默认配置行为。可能的改进方向包括：

1. 根据环境自动设置 sourcemap 选项
2. 提供更清晰的文档说明调试配置
3. 优化 sourcemap 生成策略以平衡调试需求和构建性能

总结

正确配置 sourcemap 对于 Electron 应用的调试至关重要，特别是当使用 TypeScript 等需要编译的语言时。通过简单的配置调整，开发者可以恢复完整的调试功能，显著提升开发效率。