umi-plugin-electron-pro

基于umi4和electron-pro框架

安装

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

umi4需要手动启用插件

import { defineConfig } from "umi";

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

配置完成之后，执行

$ yarn postinstall

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

$ yarn electron:init

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

{
  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",
}

开发

$ yarn electron:dev

打包

打包路径不能有中文，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位

使用 node 环境下运行的模块

例：使用 serialport 插件

$ pnpm i serialport @types/serialport

配置 .umirc.ts

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