electron-vite 是一个新型 Electron 开发构建工具，旨在为 Electron 提供更快、更精简的开发体验。
设计初衷
现实问题
得益于 Vite 卓越的前端开发体验，越来越多的 Electron 项目也开始应用它来构建开发。翻阅各种社区资源可以发现很多基于 Vite 搭建的 Electron 开发模板，但都存在着一些共同的问题：
- 配置相对复杂，繁琐
- 需要辅助脚本来配合编译开发
- 无法举一反三，自主选择前端框架（Vue、React 和 Svelte 等）
electron-vite 旨在解决这些问题，为 Electron 提供更快、更精简的开发体验。
Electron 特性
要解决这些问题，我们需要先了解 Electron。 Electron 是一个基于 Chromium 和 Node.js 构建跨平台桌面应用程序的框架，这意味着打包工具需要同时处理 Node.js 和浏览器两种环境。
Vite 有能力同时处理这两种环境。electron-vite 在运行时会直接打包主进程和预加载脚本源码，但是对于渲染器来说，会启动一个 dev server 来使用 Vite 的 HMR，这将极大地提高 Electron 的开发效率。
最佳实践
很多开发者和社区模板，都会通过开启node集成（nodeIntegration）和关闭上下文隔离（contentIsolation）的方式来开发。尽管这可以获得一点点的开发效率，但不应该被推荐，这是很不安全的做法。在 Electron 中，不仅仅是浏览器，它还提供很多强大的原生能力，如文件系统访问，shell等。事实上，最流行的 Electron 应用程序（slack、visual studio code 等）都不会这样做。
所以，electron-vite 的设计思路也会遵循这一点，包括推荐的项目结构、内置配置等。
了解 electron-vite
electron-vite 是一个新型构建工具，旨在为 Electron 提供更快、更精简的开发体验。它主要由三部分组成：
- 一套构建指令，它使用 Vite 打包你的代码，并且它能够处理 Electron 的独特环境，包括 Node.js 和浏览器环境。
- 集中配置主进程、渲染器和预加载脚本的 Vite 配置，并针对 Electron 的独特环境进行预配置。
- 为渲染器提供快速热重载（HMR），极大地提高了开发效率。
electron-vite 快速、简单且易学易用，旨在开箱即用。
以下是 electron-vite dev 的运行原理图：
如何使用
安装
npm i electron-vite -D命令行界面
在安装了 electron-vite 的项目中，你可以直接使用 npx electron-vite 运行，也可以在 package.json 文件中添加 npm scripts：
{
"scripts": {
"start": "electron-vite preview", // 开启 Electron 程序预览生产构建
"dev": "electron-vite dev", // 开启开发服务和 Electron 程序
"prebuild": "electron-vite build" // 为生产构建代码
}
}配置 electron-vite
当以命令行方式运行 electron-vite 时，electron-vite 将会自动尝试解析项目根目录下名为 electron.vite.config.js 的配置文件。最基本的配置文件如下所示：
// electron.vite.config.js
export default {
main: {
// vite config options
},
preload: {
// vite config options
},
renderer: {
// vite config options
}
}注：对于一个简单的 Electron 项目而言，上述的配置就基本可以满足需求了，因为 electron-vite 内置很多针对 Electron 开发的配置，极大的减轻开发者配置心智负担。
Electron 入口
当使用 electron-vite 打包代码时，Electron 应用程序的入口点应更改为输出目录中的主进程入口文件。默认的输出目录 outDir 为 out。你的 package.json 文件会是这样：
{
"name": "electron-app",
"version": "1.0.0",
"main": "./out/main/index.js",
}Electron 的工作目录将是输出目录，而不是你的源代码目录。因此在打包 Electron 应用程序时可以将源代码排除。
在渲染进程中使用 HMR
为了在渲染器中使用模块热替换（HMR）功能，需要使用 环境变量 来确定窗口浏览器是加载本地 html 文件还是本地 URL。
function createWindow() {
// Create the browser window
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, '../preload/index.js')
}
})
// Load the local URL for development or the local
// html file for production
if (!app.isPackaged && process.env['ELECTRON_RENDERER_URL']) {
mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
} else {
mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'))
}
}热重载
热重载是指在主进程或预加载脚本模块发生变化时快速重新构建并重启 Electron 程序。事实上，并不是真正的热重载，而是类似的。它为开发者带来了很好的开发体验。
有两种启用方式：
- 使用 CLI 选项
-w或--watch，例如electron-vite dev --watch。这是首选方式，它更加灵活。 - 使用配置项
build.watch并设为{}。此外，还可以配置更多的 watcher 选项，见 WatcherOptions。
使用 VSCode 调试
使用 electron-vite 情况下，调试 Electron 是极其简单的事情。
添加文件 .vscode/launch.json，配置内容为：
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite",
"windows": {
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite.cmd"
},
"runtimeArgs": ["--sourcemap"]
}
]
}然后，在 main.ts（源代码）中设置一些断点，并在 VSCode 调试视图 中开始调试。
注：--sourcemap 为 electron-vite CLI 选项，通过此选项生成源代码 source map 文件来支持调试。
快速搭建一个 electron-vite 项目
使用 NPM
npm create @quick-start/electron使用 Yarn
yarn create @quick-start/electron使用 PNPM
pnpm create @quick-start/electron然后按照提示操作即可!
✔ Project name: …
✔ Select a framework: › vue
✔ Add TypeScript? … No / Yes
✔ Add Electron updater plugin? … No / Yes
✔ Enable Electron download mirror proxy? … No / Yes
Scaffolding project in ./...
Done. 你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Electron + Vue 项目，运行:
# npm 6.x
npm create @quick-start/electron my-app --template vue
# npm 7+, extra double-dash is needed:
npm create @quick-start/electron my-app -- --template vue
# yarn
yarn create @quick-start/electron my-app --template vue
# pnpm
pnpm create @quick-start/electron my-app --template vue目前支持的模板预设如下：
| JavaScript | TypeScript |
|---|---|
| vanilla | vanilla-ts |
| vue | vue-ts |
| react | react-ts |
| svelte | svelte-ts |
了解更多有关 create-electron 的信息。
需要特别指出的是create-electron增加了pnpm支持和中国区 Electron 下载问题的配置选项，来改善开发者的体验。
结语
你可以通过以下链接了解更多关于 electron-vite 的信息：