electron-vite新⼀代electron开发构建⼯具
⽬录
前⾔
electron-vite 是什么
特性
安装
开发&编译
推荐项⽬⽬录
开始学习
配置
配置⽂件
配置智能提⽰
预设配置
基于主进程的编译项预设:
基于preload脚本的编译项预设:
基于渲染进程的编译项预设:
配置问题
如果 Electron 具有多窗⼝应该如何配置?
结语
前⾔
得益于Vite卓越的前端开发体验，越来越多的Electron项⽬也开始应⽤它来构建开发。翻阅各种社区资源可以发现很多基于Vite 搭建的 Electron 开发模板，但都存在着⼀些共同的问题：
配置相对复杂，繁琐（对 main，preload 和 renderer 分别配置）
需要辅助脚本来配合编译开发
⽆法举⼀反三，⾃主选择前端框架（vue，react，svelte，……）
⾯对这些问题，我们需要对 Electron 有了解。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 && v['ELECTRON_RENDERER_URL']) {
mainWindow.v['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
|    └──...
├──fig.js
└──package.json
开始学习
克隆electron-vite-boilerplate (github/alex8088/electron-vite-boilerplate) 项⽬学习
通过create-electron脚⼿架来搭建项⽬学习
npm init @quick-start/electron
配置
配置⽂件
当以命令⾏⽅式运⾏electron-vite时，将会⾃动尝试解析项⽬根⽬录中名为fig.js的配置⽂件。最基本的配置⽂件如下所⽰：
// fig.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 = {electron vue教程
// ...
}
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.13
<: src\main{index|main}.{js|ts|mjs|cjs}(相对于根⽬录), 不到则为空
lib.formats: cjs
outDir: out\preload(相对于根⽬录)
target: 同主进程
<: src\preload{index|preload}.{js|ts|mjs|cjs}(相对于根⽬录), 不到则为空
lib.formats: cjs
基于渲染进程的编译项预设:
root: src\renderer(相对于根⽬录)
outDir: out\renderer(相对于根⽬录)
target: chrome*, ⾃动匹配Electron的chrome构建⽬标. 如 Electron 17 为chrome98
<: src\renderer\index.html(相对于根⽬录), 不到则为空
polyfillModulePreload: false, 不需要为渲染进程 polyfill Module Preload
提⽰：如果你想在已有的项⽬中使⽤这些预设配置，可以使⽤ Vite 的插件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 ⽀持。
到此这篇关于electron-vite新⼀代electron开发构建⼯具的⽂章就介绍到这了，更多相关electron-vite构建⼯具内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。