electron打包
electron文档地址:https://www.electronjs.org/docs快速启动官方项目:// 克隆示例项目的仓库git clone https://github.com/electron/electron-quick-start// 进入项目cd electron-quick-start// 安装依赖npm install// 运行npm startweb项目转为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,申请管理员权限问题
更多推荐
所有评论(0)