electron 热更新以及对 ts 的支持

前言

虽然 Electron 官方宣布支持 TypeScript，但它只是支持了类型定义文件，而不是真正的 TS 开箱即用。

比如你的入口文件是 ts，当你运行 electron .启动项目的时候，依然会报错不识别 ts：Unknown file extension ".ts"。

运行时

支持ts

所以如果你的 electron 主进程使用了 ts，那你还是需要使用额外的转译插件，将其转为 js 文件给 electron运行，如 esbuild、tsc 、甚至使用完成的工具集 electron-vite。

如果你不想手动进行编译操作，那你可以使用node直接运行 ts 插件，如 ts-node、tsx 等等插件，具体如：

// electron-demo/package.json
{
  "main": "src/index.ts",
  "scripts": {
    "dev": "NODE_OPTIONS=\"--import tsx\" electron ."
  },
}

但是这个仅仅的 dev 阶段，设计到打包 electron-build 仍然需要你进行编译，而不能识别 ts 文件

不过伴随着 node23 原生支持 ts 的出现，相信不久的将来 electron 真的能做到对 ts 开箱即用般的支持。

但目前最新版本的 electron v35 内置的仍然是最后 lts 版本 node v22，so 仍然无法做到直接支持 ts

热更新

但是每次你改动主进程的代码，都需要重新启动项目，这就非常麻烦，好在依然后三方库 electronmon，最将命令改成这样即可

// electron-demo/package.json
{
  "main": "src/index.ts",
  "scripts": {
    "dev": "NODE_OPTIONS=\"--import tsx\" electronmon ."
  },
}

构建

构建依然需要将ts 转为 js，又因为使用 esm+ts，我们这么做：修改electron 的启动文件为打包后的文件

// electron-builder.json
{
 "extraMetadata": {
    "main": "dist/index.js"
  },
}

创建 ts 配置文件(主要 tsc 使用)

// tsconfig.json
{
  "compilerOptions": {
    "outDir": "dist",
    "esModuleInterop":true,
    // "module": "ESNext" // 默认 cjs

  },

  "include": ["src/**/*"],
  "exclude": ["src/render"]
}

编写打包脚本,最后运行它 node ./build.js

// build.js
import { spawnSync } from "node:child_process";
import fsExtra from 'fs-extra';

spawnSync("npx", ["tsc"], { stdio: "inherit", shell: true });
fsExtra.copySync("./src/render","./dist/render");
spawnSync("npx", ["electron-builder"], { stdio: "inherit", shell: true });

后续

如有必要计划启用 esbuild、甚至 vite来完成更复杂的构建内容，当然也可以直接使用 electron-vite （但这将没什么成长意义，也无法理解它的核心，建议先看看作者对此插件的心得笔记）