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
猜你喜欢
- 作为酷爱编程的老程序员,实在按耐不下这个冲动,Python真的是太火了,不断撩拨我的心。我是对Python存有戒备之心的,想当年我基于Dru
- 前言:一个完整的 HTTP 请求,包括客户端向服务端发送的 Request 请求和服务器端发送的 Response 响应。为了能方便的访问获
- 做软件开发时基本都会涉及到数据的使用,比如最简单用户登录注册,这用户信息则需要使用数据库做存储管理。而在项目开发测试过程最常使用的数据库则是
- filter的语法:filter(函数名字,可迭代的变量)其实filter就是一个“过滤器”:把【可迭代的变量】中的值,挨个地传给函数进行处
- 下面一段代码给大家带来了python实现12306登录功能,具体代码如下所示:#!/usr/bin/env pythonimport req
- 如何将产生的密码记录并发送给用户?这里使用了cdonts邮件组件来发送邮件,前提服务器得支持cdonts组件。好了,看看具体实现方法吧,不是
- 前言前面我们已经安装好了Docker,也简单了解了Docker。下面就来给大家介绍下Docker创建Mysql容器的简单步骤,话不多说了,来
- 下面是代码class GroupInfos(models.Model): uid = models.AutoField(primary_ke
- 京东购物车抢购商品1.Python的下载和安装这里由于我们代码是基于Python来执行的所以我们这里需要2个东西:一个是Python本身,另
- 这篇文章主要是用PHP函数实现数字与文字分页,具体实现步骤就不罗嗦了,直接上代码/** * * @param $_sql * @param
- 在DreamWeaver中编写CSS,这种编写习惯本站(twocity.cn)并不提倡,不过由于"可视化"和操作简便,使
- 来自巴西的设计师Roger Oddone的作品,通过此作品你可以了解到logo的设计的一些思路。
- 程序中经常需要使用excel文件,批量读取文件中的数据python读取excel文件可以使用xlrd模块pip install xlrd安装
- 一、闭包闭包相当于函数中,嵌套另一个函数,并返回。代码如下:def func(name): # 定义外层函数 def inner
- 弹性管理 ECS 实例获取 RAM 子账号 AK 密钥使用API管理ECS实例,您需要能访问ECS资源的API密钥(AccessKey ID
- 一、安装MySQL在Ubuntu中,默认情况下,只有最新版本的MySQL包含在APT软件包存储库中,要安装它,只需更新服务器上的包索引并安装
- python遍历迭代器自动链式处理数据pytorch.utils.data可兼容迭代数据训练处理,在dataloader中使用提高训练效率:
- 这篇文章主要介绍了Python partial函数原理及用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值
- 如下所示:python 设置值import pandas as pdimport numpy as npdates = pd.date_ra
- 如下所示:def softmax(logits, axis=None, name=None, dim=None): ""