electron-vite（新一代|electron-vite：新一代 Electron 开发利器，带你轻松玩转 Electron） electron-vite：新一代Electron开发

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 的运行原理图：

electron-vite（新一代|electron-vite：新一代 Electron 开发利器，带你轻松玩转 Electron）

文章图片

如何使用安装

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 / YesScaffolding 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

目前支持的模板预设如下：