【第2590期】基于Vite的electron开发构建工具：electron-vite
前言
周末愉快。今日前端早读课文章由@鸿雁投稿分享。
正文从这开始~~
得益于 Vite 卓越的前端开发体验，越来越多的 Electron 项目也开始应用它来构建开发。翻阅各种社区资源可以发现很多基于 Vite 搭建的 Electron 开发模板，但都存在着一些共同的问题：
配置相对复杂，繁琐（对 main，preload 和 renderer 分别配置）
需要辅助脚本来配合编译开发
无法举一反三，自主选择前端框架（vue，react，svelte，……）
面对这些问题，我们需要对 Electorn 有了解。Electron 是一个基于 Chromium 和 Node.js 的桌面应用框架，这意味着编译构建工具需要同时处理 node.js 和浏览器两种环境的代码。这是造成 Electron 开发构建工作复杂性的主因。
知识点
主进程和预加载脚本，需基于 cjs 模块化标准构建，运行在 node 环境
渲染进程，通常融合现代前端框架如 vue.js，react 等基于 iife 模块化标准构建，运行在浏览器
在 Electron 中开启 node 集成，可全程基于 cjs 模块化标准编写代码，尽管不需要编译构建，但不利于利用现代前端框架，还会面临严重的性能和安全问题
基于 esm 标准不编译构建，尽管 node 本身已支持，但 Electron 并不支持，这也是 Electron 后续版本的一项工作
electron-vite 是什么
electron-vite 是一个与 Vite 集成的 Electron 构建工具。开发者无需过多关注配置，无论选择哪种前端框架都能轻松完成构建，提高 Electron 的开发构建效率。
特性
⚡️使用方式与 Vite 相同
🔨主进程/渲染进程/preload脚本都使用 Vite 构建
📃统一所有配置，合并到一个文件中
📦预设构建配置，无需关注配置
🚀支持渲染进程热更新(HMR)
安装
npm i electron-vite -D
开发&编译
在安装了 electron-vite 的项目中，可以直接使用 npx electron-vite 运行， 也可以在 package.json 文件中添加 npm scripts：
{
"scripts": {
"start": "electron-vite preview", // start electron app to preview production build
"dev": "electron-vite dev", // start dev server and electron app
"prebuild": "electron-vite build" // build for production
}
}
为了使用热更新(HMR)，需要使用环境变量（ELECTRON_RENDERER_URL）来决定 Electron 窗口加载本地页面还是远程页面。
function createWindow() {
// Create the browser window
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, '../preload/index.js')
}
})
// Load the remote 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'))
}
}
注意: 在开发中, 渲染进程 index.html 文件需要通过 <script type="module"> 引用脚本。
推荐项目目录
├──src
| ├──main
|| ├──index.js
|| └──...
| ├──preload
|| ├──index.js
|| └──...
| └──renderer
| ├──src
| ├──index.html
| └──...
├──electron.vite.config.js
└──package.json
开始学习
克隆 electron-vite-boilerplate (https://github.com/alex8088/electron-vite-boilerplate) 项目学习
通过 create-electron 脚手架来搭建项目学习
npm init @quick-start/electron
配置
配置文件
当以命令行方式运行 electron-vite 时， 将会自动尝试解析项目根目录中名为 electron.vite.config.js 的配置文件。最基本的配置文件如下所示：
// electron.vite.config.js
export default {
main: {
// vite config options
},
preload: {
// vite config options
},
renderer: {
// vite config options
}
}
你可以显式地通过 --config 命令行选项指定一个配置文件（相对于 cwd 路径进行解析）:
electron-vite --config my-config.js
提示: electron-vite 也支持 ts 或者 mjs 的配置文件.
配置智能提示
因为 electron-vite 本身附带 Typescript 类型，所以你可以通过 IDE 和 jsdoc 的配合来实现智能提示：
/**
* @type {import('electron-vite').UserConfig}
*/
const config = {
// ...
}
export default config
你还可以使用 defineConfig and defineViteConfig 工具函数，这样不用 jsdoc 注解也可以获取类型提示：
import { defineConfig, defineViteConfig } from 'electron-vite'
export default defineConfig({
main: {
// ...
},
preload: {
// ...
},
renderer: defineViteConfig(({ command, mode }) => {
// conditional config use defineViteConfig
// ...
})
})
提示: defineViteConfig 从 Vite 中导出.
预设配置
基于主进程的编译项预设:
outDir: out\main(相对于根目录)
target: node
*, 自动匹配 Electron 的 node 构建目标， 如 Electron 17 为 node16.13lib.entry: src\main{index|main}.{js|ts|mjs|cjs}(相对于根目录), 找不到则为空
lib.formats: cjs
rollupOptions.external: electron和所有内置node模块(如果用户配置了外部模块ID，将自动合并)
基于preload脚本的编译项预设:
outDir: out\preload(相对于根目录)
target: 同主进程
lib.entry: src\preload{index|preload}.{js|ts|mjs|cjs}(相对于根目录), 找不到则为空
lib.formats: cjs
rollupOptions.external: 同主进程
基于渲染进程的编译项预设:
root: src\renderer(相对于根目录)
outDir: out\renderer(相对于根目录)
target: chrome*, 自动匹配 Electron 的 chrome 构建目标. 如 Electron 17 为 chrome98
lib.entry: src\renderer\index.html(相对于根目录), 找不到则为空
polyfillModulePreload: false, 不需要为渲染进程 polyfill Module Preload
rollupOptions.external: 同主进程
提示：如果你想在已有的项目中使用这些预设配置，可以使用 Vite 的插件 vite-plugin-electron-config (https://github.com/alex8088/vite-plugin-electron-config)
配置问题
如果 Electron 具有多窗口应该如何配置?
当 Electron 应用程序具有多窗口时，就意味着可能有多个 html 页面和 preload 脚本，你可以像下面一样修改你的配置文件：
export default {
main: {},
preload: {
build: {
rollupOptions: {
input: {
browser: resolve(__dirname, 'src/preload/browser.ts'),
webview: resolve(__dirname, 'src/preload/webview.ts')
}
}
}
},
renderer: {
build: {
rollupOptions: {
input: {
browser: resolve(__dirname, 'src/renderer/browser.html'),
webview: resolve(__dirname, 'src/renderer/webview.html')
}
}
}
}
}
结语
项目现在已经开源，欢迎各位感兴趣的小伙伴参与贡献提交 PR 或反馈 issue，给予 star 支持。
项目Github：https://github.com/alex8088/electron-vite
关于本文
作者：@鸿雁
原文：https://mp.weixin.qq.com/s/DWrP4W2NEmEaXthsyMrm_g
相关阅读
【第2489期】基于Vite搭建开发体验超级丝滑的Vue3组件库开发框架
【第2451期】Relyzer —— 一个 React FC 的运行分析工具
欢迎自荐投稿，前端早读课等你来。