electron 开发模板脚手架

之前番茄钟应用，我们采用的是最原始的结构开发。但实际项目开发肯定是用脚手架的。

下面是一些常用脚手架推荐：

electron-vite

• electron-vite | 下一代 Electron 开发构建工具

支持的模板：

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
svelte	svelte-ts
solid	solid-ts

electron-vite-vue/react

• Electron⚡️Vite | Electron⚡️Vite

提供了两个模板：

• electron-vite-vue

git clone https://github.com/electron-vite/electron-vite-vue.git

cd electron-vite-vue
npm install
npm run dev

• electron-vite-react

git clone https://github.com/electron-vite/electron-vite-react.git

cd electron-vite-react
npm install
npm run dev

electron-react-boilerplate

仅支持 react，并且是和 webpack 结合。

• Hello from Electron React Boilerplate | Electron React Boilerplate

自制简易模板

1. vite 创建一个 vue 项目
2. 安装 electron
3. electron 加载 vite 构建的结果
   1. win.loadURL("http://localhost:5173");

要想实现第三步需要执行两个命令，vite 构建和启动 electron。我们可以手动一个一个执行，但显然能并行执行是最好的。比如 pnpm dev，同时执行上面两个命令。

要同时执行多个命令可以用一个库：concurrently。

• https://github.com/open-cli-tools/concurrently

# 语法
concurrently "command1 arg" "command2 arg"

{
  "script": {
    "dev": "concurrently \"vite\" \"electron .\"" 
  }
}

脚手架还需配置环境变量，以便修改 win.loadURL() 的内容，在 vite build 后，electron 自动加载 vite 打包后的产物。

以此管中窥豹，electron 脚手架工具就是以类似方式搭建起来的。