electron-vite新一代electron开发构建工具
作者:Alex114 发布时间:2023-07-02 17:03:57
前言
得益于 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 && 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.13
lib.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
, 不需要为渲染进程 polyfillModule Preload
rollupOptions.external: 同主进程
提示:如果你想在已有的项目中使用这些预设配置,可以使用 Vite 的插件
vite-plugin-electron-config
(github.com/alex8088/vi…)
配置问题
如果 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')
}
}
}
}
}
来源:https://juejin.cn/post/7084126780390375461
猜你喜欢
- 在进行网页抓取的时候,分析定位html节点是获取抓取信息的关键,目前我用的是lxml模块(用来分析XML文档结构的,当然也能分析html结构
- vue动态添加store,路由和国际化vue动态添加store想写组件库?用这个吧 …// store module标
- 解读model.named_parameters()与model.parameters()model.named_parameters()迭
- 一、数据可视化1.pyecharts介绍官方网址:https://pyecharts.org/#/zh-cn/intro📣 概况:Echar
- 1、基本语法和说明在 Go 语言 中,跳转控制语句除了有 goto 、break 和&nb
- 本文实例分析了Python多线程操作数据库相关问题。分享给大家供大家参考,具体如下:python多线程并发操作数据库,会存在链接数据库超时、
- 之前安装mysql 5.7.12时未做总结,换新电脑,补上安装记录,安装的时候,找了些网友的安装记录,发现好多坑(一)mysql 5.7.1
- 在流量统计服务中都有Traffic source这个功能。Traffic source是针对访次级别的概念,换句话说,当访次建立的时候,la
- 大家在使用MySQL查询时正常是直接一个表的查询,要不然也就是多表的关联查询,使用到了左联结(left join)、右联结(right jo
- 最近,我加入了Cloudera,在这之前,我在计算生物学/基因组学上已经工作了差不多10年。我的分析工作主要是利用Python语
- A.截取从字符串左边开始N个字符 Declare @S1 varchar(100) Select @S1='http://www.x
- 初识defaultdict之前在使用字典的时候, 用的比较随意, 只是简单的使用dict.然而这样在使用不存在的key的时候发生KeyErr
- 一、什么是上下文管理器我们在处理文件的时候经常看到下面这样的代码,它即是上下文管理器:with open('test.txt'
- 远程运行最怕断电,训练了几个小时的数据说没就没,或者停止运行。用nohup 记录代码的输出,还可以不受断电的影响。方法1. 用nohup 运
- 一个JavaScript代码编写的图片展示特效,效果很棒。效果图:演示:<!DOCTYPE HTML PUBLIC "-//
- 前篇我们稍微学习了Python中时间的获取,这次继续学习日期的时区转换,格式化等等。开发中常用的日期操作还有哪些?时区转换显示日期格式化秒数
- 在开发django项目时,启动开发服务器的命令为:python manager.py runserver [port]其中,[port]选项
- 本文实例讲述了Python反射和内置方法重写操作。分享给大家供大家参考,具体如下:isinstance和issubclassisinstan
- 本文讲述了mysql索引必须了解的几个重要问题。分享给大家供大家参考,具体如下:1、索引是做什么的?索引用于快速找出在某个列中有一特定值的行
- 场景一:A网站全站均为UTF-8编码,B网站全站为GB2312编码。A网站提供一段JS代码供B网站调用,该代码会动态生成一个FORM表单,以