Electron + antdesignPro + electron-builder 开发及打包

Electron + antdesignPro + electron-builder 开发及打包

之前用的electron-package 打包比较麻烦还通过 nsis 打出的安装包，配置图标。
这一版用的 electron-builder

（此项目是目前在用的踩过坑的项目， 希望帮到大家）

1： 文件结构， 这里加了一个 electron文件夹

2： main.js 使用的话只要借鉴 1， 4

const {
  app,
  BrowserWindow,
  ipcMain,
} = require('electron')
const path = require('path');
const isDev = require('electron-is-dev');
const url = require('url');

const {
  updateHandle
} = require('./update.js');

const {
  updateProject
} = require('./updateProject.js');
const {
  exportFirmware,
  handleChooseFolderPath
} = require('./exportFirmware.js');

let win;

// 1, 4 是必须的， 2是个人业务， 3：更新功能非必须

// 1: 创建窗口配置 (必须)
function createWindow() {

  win = new BrowserWindow({
    width: 1100,
    height: 800,
    icon: path.join(__dirname, '../build/assets/images/qatool.ico'),
    autoHideMenuBar: isDev ? false : true,
    webPreferences: {
      preload: path.join(__dirname, '../preload.js'), // 目前内部没做具体业务
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  });

  win.on('closed', () => {
    win = null;
  });

  win.loadURL(
    isDev ?
    '当前启动的dev本地地址' :
    url.format({
      //   // 这里地址别错了呀
      pathname: path.join(__dirname, '../build/index.html'),
      protocol: 'file:',
      slashes: true
    })
    // `file://${path.join(__dirname, '../build/index.html')}`
  );

  updateHandle(win, feedUrl);
}

// 2: 业务功能 ==>
ipcMain.handle('export-firmware', async (event, ...args) => {
  return exportFirmware(args)
})

ipcMain.handle('choose-directory', async (event, ...args) => {
  return handleChooseFolderPath(args)
})

ipcMain.handle('update-project', async (event, ...args) => {
  return updateProject(args);
});
// 业务功能 <==

// 3: 更新功能 ==>
let feedUrl = "http://192.168.101.13:8080/QATool/publish/";
ipcMain.handle('update', (e, arg) => {
  updateHandle(ipcMain, win, feedUrl);
})
// 更新功能 <==

// 4: 启动模块 (必须)
app.on('ready', createWindow);
app.on('will-quit', () => {});

app.whenReady().then(() => {
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin' || process.platform === 'win32') {
    app.quit()
  }
})

3：andesignPro config.ts

  history: { type: 'hash' },
  publicPath: './',
  outputPath: "/build",
  hash: true,
  antd: {},
  dva: {
    hmr: true,
  },

4：package.json， 这里有启动命令， 还额外配置一个 build节点，是控制打包的

  "name": "xxx",
  "version": "0.8.0", // 安装包的版本;比如生成 eg： {xxx 0.8.0.exe}
  "homepage": "./",
  "main": "electron/main.js",
  "scripts" {
  		"start": "set PORT=8011 && cross-env UMI_ENV=dev umi dev",
  	    "electron": "electron . --hot --trace-warnings ...",
    	"electron:build": "yarn build && electron-builder -c.extraMetadata.main=electron/main.js",
  },
  "build": { // 这里的功能是打包配置
    "extends": null,
    "appId": "QATool",
    "asar": {
      "smartUnpack": true
    },
    "files": [
      "build/**/*",
      "node_modules/**/*",
      "package.json",
      "main.js",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets"
    },
    "win": {
      "target": [
        "nsis"
      ],
      "icon": "build/assets/images/qatool.ico"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "build/assets/images/qatool.ico",
      "uninstallerIcon": "build/assets/images/qatool.ico",
      "installerHeaderIcon": "build/assets/images/qatool.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "license": "license.txt"
    },
    "publish": {
      "provider": "generic",
      "url": "http://26.26.26.1:8080/QATool/dist/",
      "channel": "latest"
    }
  },

5: README