electron打包

傷城~ 2022-09-10 13:19 335阅读 0赞

## 一.electron ##

**文档地址：**  
[https://www.electronjs.org/docs][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命令生成  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16]  
main.js：运行成桌面应用需要用到的相关配置和api等各种桌面应用需要用到的electron操作，比如：打开应用的宽高，应用快捷键等  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
**页面加载路径最好使用： mainWindow.loadFile(path.join(\_\_dirname, ‘build/index.html’))**

preload.js：可以写入各种监听事件，监听页面动作传递给main.js文件中使用electron api写事件  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
package.json：加入electron运行配置  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
**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/

或者直接修改系统环境变量：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 5]  
再重启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文件下的两个依赖对象下的依赖全部删除，再进行打包  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 6]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 7]  
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）  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 8]

## 三.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"
    },
    "build": { 
        "productName": "my-electron",
        "appId": "com.example.app",
        "copyright": "my-electron",
        "directories": { 
          "output": "dist"// 输出文件夹
        }
    },

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 9]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 10]![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 11]

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

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

[https_www.electronjs.org_docs]: https://www.electronjs.org/docs
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/27512de8617b4714a2c781445e75292a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/51bf102d91994ff9b74aa3bd779b0d2a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/d85b0348f0124f32a8ef4c12037cedac.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/4a16c7c5af994ea894d11cf885e6d758.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/5dcb67e421b04392935c290b56a7dfb5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220829/6f1504629e314e94ba9b639595243c1a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220829/c6a3cca452484d18a20f3adc344bfbd0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220829/def8461c28b74fb283d3b0a7bc39811b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220829/c7929f1b3331430d99c2b60aad8b976c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 9]: /images/20220829/3b2f51df062f41d6ad535c786f7150ff.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/3f563e67892a4136bd4a5627001b6bb0.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAamp5ODA0MA==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamp5ODA0MA_size_20_color_FFFFFF_t_70_g_se_x_16 11]: /images/20220829/c1884aeadaf24792b532ddbeec30c733.png
[electron-packager]: https://newsn.net/say/electron-packager.html
[React _ Electron]: https://blog.csdn.net/qq_25881261/article/details/81559794
[Electron_React_Antd_electron-builder _ _ electron-packager]: https://blog.csdn.net/weixin_41888177/article/details/99944127
[electron _ electron-packager]: https://blog.csdn.net/qq_36145914/article/details/100898137
[electron electron-packager]: https://segmentfault.com/q/1010000015256096
[Electron_electron-packager]: https://www.jianshu.com/p/ced115ccab75
[electron_ _electron-builder_electron-packager_.exe]: https://blog.csdn.net/sinat_36728518/article/details/109216432?utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-2.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-2.no_search_link
[electron _main.js _package.json]: https://blog.csdn.net/weixin_44477401/article/details/86774969?utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-4.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-4.no_search_link
[electron_electron-packager_electron-builder_for Windows]: https://segmentfault.com/a/1190000013924153
[electron-builder]: https://blog.csdn.net/qq_32682301/article/details/105234408
[electron-builder 1]: https://blog.csdn.net/weixin_41779718/article/details/106562736
[electron_electron-builder_web]: https://blog.csdn.net/shufan209/article/details/106281426/
[Electron-builder]: https://www.jianshu.com/p/4699b825d285?from=timeline
[electron-packager 1]: https://newsn.net/say/electron-packager-extra-resource.html
[Electron]: https://zhuanlan.zhihu.com/p/94171579?from_voters_page=true
[Electron_electron-builder_electron-updater]: https://segmentfault.com/a/1190000012904543