electron打包

一.electron

文档地址：
https://www.electronjs.org/docs

快速启动官方项目：

// 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start
// 进入项目
cd electron-quick-start
// 安装依赖
npm install
// 运行
npm start

web项目转为electron应用：
首先安装electron插件npm install electron -D
关于electron应用的相关配置都在根文件的main.js、preload.js、package.json中配置，前面两个个文件从官方示例中下载放入自己项目中再进行修改，后一个文件由npm init命令生成

main.js：运行成桌面应用需要用到的相关配置和api等各种桌面应用需要用到的electron操作，比如：打开应用的宽高，应用快捷键等


页面加载路径最好使用： mainWindow.loadFile(path.join(__dirname, ‘build/index.html’))

preload.js：可以写入各种监听事件，监听页面动作传递给main.js文件中使用electron api写事件

package.json：加入electron运行配置

api使用：
渲染进程发送事件：
ipcRenderer.send(‘min’);
主进程接收事件：
ipcMain.on(‘min’, e=> mainWindow.minimize());
主进程发送事件：
mainWindow.webContents.send(‘message’, text)
渲染进程接收事件：
ipcRenderer.on(“message”, (event, text) => {
console.log(text);
});

二.electron-packager

1.可全局或在项目中安装electron-packager插件

// 全局安装
npm install -g electron-packager
// 项目安装
npm install electron-packager -D

2.在package.json中添加代码：

"main": "main.js",
"homepage": ".",
"scripts": {
  "package": "electron-packager ./ myapp --all --out=package --electron-version 13.1.5 --overwrite --icon=./build/assets/favicon.ico
}

// package打包命令解析：
electron-packager <sourcedir> <appname> <platform> <architecture> <electron version> <optional options>

可指定平台：–all所有平台，–platform=linux指Linux系统，–platform=win32指windows系统，–platform=darwin指mac系统
3.执行打包命令后卡住不动有可能是github下载electron的资源下载不下来，可以尝试使用淘宝镜像：

npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

或者直接修改系统环境变量：

再重启cmd运行
4.若是提示内存溢出可能需要扩大内存：
（1）在打包命令后加上–max_old_space_size=10240，具体多大自己决定
（2）全局安装increase-memory-limit，再在项目下执行运行increase-memory-limit操作

npm install increase-memory-limit

increase-memory-limit

5.若是项目依赖过大造成的打包失败，可以尝试将由框架生成的打包文件挪到新的文件夹下，并将三个打包配置文件一起拷贝过去，其中package.json文件下的两个依赖对象下的依赖全部删除，再进行打包


6.生成可执行文件包过大时可以在打包命令中加上忽略的文件夹

"scripts": {
  "package": "electron-packager ./ myapp --all --out=package --electron-version 13.1.5 --overwrite --icon=./build/assets/favicon.ico --ignore=node_modules --ignore=src
}

注意–ignore命令不能忽略不存在的文件夹，否则打包出来的可执行文件是白屏

7.Linux图标可能需要另外设置（图片可能需要256*256）

三.electron-builder

1.可全局或在项目下安装electron-builder

// 全局安装
npm install -g electron-builder
// 项目安装
npm install electron-builder -D

2.在package.json中进行相关配置：(相关配置详见文档：https://www.electron.build/configuration/configuration)

"main": "main.js",
"homepage": ".",
"scripts": {
	"builder:dir": "electron-builder --dir",
    "builder": "electron-builder"
},
"author": "name<xxx@xxx.com>",// Linux下必须这么写，否则打包会报错
"build": {
    "productName": "my-electron",
    "appId": "com.example.app",
    "copyright": "my-electron",
    "directories": {
      "output": "dist"// 输出文件夹
    }
},

3.node版本最好在12及以上，否则会报错
4.容易出现下载资源不成功，可以按照下面参考文章10进行操作或者安装镜像：

npm config set ELECTRON_BUILDER_BINARIES_MIRROR http://npm.taobao.org/mirrors/electron-builder-binaries/

5.遇上各种无法解析，可以尝试使用npm或者yarn安装插件，先将node_modules文件夹删除后执行npm install或者yarn install 命令进行重新安装依赖，不要使用cnpm淘宝镜像安装
6.打包后白屏：打开控制台查看引入的文件地址是否能获取到文件，可以考虑一开始的时候取消加密打包（“build"中加上"asar”: false）
7.拷贝静态文件到指定位置：

"extraResources":  { // 拷贝静态文件到指定位置
    "from": "./build/",
    "to": "./app/build"
},

8.windows下赋予应用权限
在打包配置下修改：

"win": {
    "requestedExecutionLevel": "highestAvailable"
  },

四.electron-updater

electron-updater属于electron-builder更新体制
electron-updater需要安装进生产环境中，并且打包不要忽略node_modules安装包，否则会报错

实际操作：
1.在electron-builder打包配置package.json中增加

"publish": [
    {
      "provider": "generic",
      "url": "https://xxx/" // 下载地址目录
    }
  ]

2.在下载目录中放入electron-builder生成的latest.yml文件（各个平台更新文件名称不同，但都带latest，且该文件每次打包后需要进行替换最新）和可进行下载更新的安装包
3.在main.js文件中进行配置：

// 引入更新插件
const {autoUpdater} = require('electron-updater');


// 以下代码放入electron创建窗口框架函数下

// 找到更新后不自动下载更新，默认为true
  autoUpdater.autoDownload = false;

  ipcMain.on("checkForUpdate", (event, data) => {
    sendUpdateMessage('查询是否有更新!!!');
    autoUpdater.checkForUpdates();
  });

  ipcMain.on("downloadUpdate", (event, data) => {
    sendUpdateMessage('执行手动下载更新!!!');
    autoUpdater.downloadUpdate();
  });

  //处理更新操作
    const returnData = {
      error: {status: -1, msg: '检测更新查询异常'},
      checking: {status: 0, msg: '正在检查应用程序更新'},
      updateAva: {status: 1, msg: '检测到新版本，正在下载,请稍后'},
      updateNotAva: {status: 2, msg: '您现在使用的版本为最新版本,无需更新!'},
    };
    //和之前package.json打包配置的一样
    autoUpdater.setFeedURL('https://xxx/');
    //更新错误
    autoUpdater.on('error', function (error) {
      mainWindow.webContents.send('updateData', returnData.error);
      sendUpdateMessage(returnData.error);
      sendUpdateMessage(error)
    });
    //检查中
    autoUpdater.on('checking-for-update', function () {
      sendUpdateMessage(returnData.checking);
      mainWindow.webContents.send('updateData', returnData.checking);
    });
    //发现新版本
    autoUpdater.on('update-available', function (info) {
      sendUpdateMessage(returnData.updateAva);
      sendUpdateMessage(info);
      mainWindow.webContents.send('updateData', returnData.updateAva);
    });
    //当前版本为最新版本
    autoUpdater.on('update-not-available', function (info) {
      sendUpdateMessage(info);
      setTimeout(function () {
        sendUpdateMessage(returnData.updateNotAva);
        mainWindow.webContents.send('updateData', returnData.updateNotAva);
      }, 1000);
    });
    // 更新下载进度事件,若是网速比较快则不会进入到这一步骤
    autoUpdater.on('download-progress', function (progressObj) {
      sendUpdateMessage("下载进度:");
      mainWindow.webContents.send('downloadProgress', progressObj)
    });
    // 下载完成
    autoUpdater.on('update-downloaded', function (info) {
      sendUpdateMessage("更新包已成功下载!!!");
      sendUpdateMessage(info);
      mainWindow.webContents.send('downloadProgress', {percent: 100});
      ipcMain.on('isUpdateNow', (event, data) => {
        autoUpdater.quitAndInstall();
      });
    });

// 通过main进程发送事件给renderer进程，提示更新信息
  function sendUpdateMessage(text) {
    mainWindow.webContents.send('message', text)
  }

五.打包报错

1.当前有正在运行的程序，得先关掉再进行打包

2.未在package.json中添加main入口，在package.json文件中添加"main": “xxxx.js”

参考文章：
1.electron-packager 命令常用参数大全（含换图标方案）
2.React + Electron封装并打包成桌面应用
3.Electron+React+Antd将网页打包成应用程序完整步骤（electron-builder （搭建热更新） 或 electron-packager（不搭建热更新））
4.electron | electron-packager打包问题汇总
5.electron electron-packager打包，命令卡在这里
6.Electron打包问题：electron-packager运行卡住终极解决方案
7.electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)
8.electron 安装打包更新配置，main.js /package.json配置
9.electron打包：electron-packager及electron-builder两种方式实现（for Windows）
10.electron-builder打包过程中报错——网络下载篇
11.electron-builder打包不成功解决方法
12.利用electron和electron-builder把前端web项目生成桌面程序
13.Electron-builder打包详解
14.electron-packager 如何正确处理第三方资源的打包问题
15.Electron客户端场景化更新升级方案实践
16.Electron应用使用electron-builder配合electron-updater实现自动更新
17.关于electron-builder打包exe，申请管理员权限问题