umi-plugin-electron-pro

基于umi4和electron-pro框架

安装

``shell
$ yarn add umi-plugin-electron-builder -dev
`

umi4需要手动启用插件

`typescript
import { defineConfig } from "umi";

export default defineConfig({
npmClient: "yarn",
plugins: ["umi-plugin-electron-pro"],
});
`

配置完成之后，执行

`shell
$ yarn postinstall
`

执行以下指令，生成主进程文件 src/main/index.ts

`shell
$ yarn electron:init
`

自动在 package.json 增加以下配置，使用@umijs/max时，请将以下命令中的umi修改为max

`json5
{
scripts: {
"rebuild-deps": "electron-builder install-app-deps",
"electron:init": "umi electron init",
"electron:dev": "umi dev electron",
"electron:dir": "max build electron --dir",
"electron:build:win": "umi build electron --win",
"electron:build:mac": "umi build electron --mac",
"electron:build:linux": "umi build electron --linux",
},
//这里需要修改成你自己的应用名称
name: "electron_pro_app",
version: "0.0.1",
}
`

$3

`
$ yarn electron:dev
`

$3

打包路径不能有中文，electron-builder不能跨平台打包，请在对应系统上打包

`
//windows
$ umi build electron --win
//mac
$ umi build electron --mac
//linux
$ umi build electron --linux
//按平台打包
$ umi build electron --win --ia32 //32位
$ umi build electron --win --x64 //64位
$ umi build electron --win --armv7l //arm32位
$ umi build electron --win --arm64 //arm64位
`

$3

例：使用 serialport 插件

`
$ pnpm i serialport @types/serialport
`

$3

`typescript
import { defineConfig } from 'umi';

export default defineConfig({
electronBuilder: {
mainSrc: 'src/main', //默认主进程目录
routerMode: 'hash', //路由 hash或memory,仅electron下有效，推荐使用hash
outputDir: 'dist_electron', //默认打包目录
externals: ['serialport'], //node原生模块配置，打包之后找不到包也需要配置在这里
rendererTarget: 'web', //构建目标electron-renderer或web，使用上下文隔离时，必须设置为web
debugPort: 5858, //主进程调试端口
//2.1.10新增 开启自定义主进程日志时
logProcess(log: string, type: "normal" | "error") {
if (type === 'normal') {
console.log(log);
} else if (type === 'error') {
console.error(log);
}
},
builderOptions: {
//配置参考 https://www.electron.build/configuration/configuration
appId: 'com.test.test',
productName: '测试',
publish: [
{
provider: 'generic',
url: 'http://localhost/test',
},
],
}, //electronBuilder参数
},
routes: [{ path: '/', component: '@/pages/index' }],
});
``

在 Electron10 以上使用contextIsolation时 rendererTarget 需要设置成
web

builderOptions参考 Electron Builder