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

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值