关于 electron-builder 打包遇到的一点点问题

空城机 发表于 2022/05/12 17:05:11 2022/05/12
【摘要】 electron打包一开始时出现error,去解决真的好累,报错一个接一个,而且我这和网上一些bug解决方案还有点不同,不能照抄别人的作业

electron打包一开始时出现error,去解决真的好累,报错一个接一个,而且我这和网上一些bug解决方案还有点不同,不能照抄别人的作业。

本次我使用的electron 打包工具是electron-builder (以后就换其他的试试)

当然也是我学艺不精了 💥


打包正常流程

在说自己错误经历之前,先走一遍可以正确打包的流程吧

为了让流程看起来干净些,创建一个独立的electron项目

  1. 使用yarn init命令创建项目,注意需要写明author作者和description描述,后续打包时如果没有会出现报错

  2. 使用yarn add electron -Dyarn add electron-builder命令安装需要的程序包。安装完程序包后,在package.json中添加运行命令和打包命令

"scripts": {
    "start": "electron .",
    "electron:build": "electron-builder --win --x64"
},

如果yarn add electron -D出错,可以看看是不是和我这篇文章中的错误相似:《yarn add electron安装失败》 https://juejin.cn/post/7091252792563613710

  1. 我在之前使用vuevue cli4创建了一款简易的小说阅读器,现在将其使用yarn build命令打包出来,生成了一份dist

里面的index.html页面可以直接在浏览器中打开,就能够直接看到效果。 不过现在先将此文件夹改个名字在放入electron项目中,不然的话等等会和打包出来文件夹名字重复

  1. package.json同级目录下创建一个main.js入口文件,该文件是electron所必须的程序进入文件

可以像下面这样写,这是一种较为简单的入口文件写法:

const electron = require('electron');
// 控制应用生命周期的模块。
const {app} = electron;
// 创建原生浏览器窗口的模块。
const {BrowserWindow} = electron;
let mainWindow;
function createWindow() {
  // 创建浏览器窗口。
  mainWindow = new BrowserWindow({width: 480, height: 670});
  // 加载应用的 index.html。
  mainWindow.loadURL(`file://${__dirname}/common/index.html`);
  // 启用开发工具
  // mainWindow.webContents.openDevTools();
}

// Electron 会在初始化后并准备
app.on('ready', createWindow);
// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  // 绝大部分应用会重新创建一个窗口。
  if (mainWindow === null) {
    createWindow();
  }
});

现在就可以尝试使用yarn start命令运行electron了,如果不出意外的话,会成功跳出小说阅读器界面

此时小说阅读器并没有打包

  1. 接下来,使用yarn electron:build命令进行打包,一路顺利,没有报错,就能看到生成了一个dist文件夹

PS: 在package.json编写build去对打包进行配置,我一开始以为这是必须的,后来发现即使不写,基础打包也可以成功。

在此文件夹中,如果使用打开packerReplay Setup 1.x.x.exe文件,那么将会进行安装程序,并且桌面会出现程序图标,点击即可打开项目。此时已经是标准的桌面应用的了

当然如果不想安装,只是想看看打包后的结果,可以打开内部的win-unpacked/packerReplay.exe,这样能跳过安装直接启动程序。


到目前为止,一个正确无误的打包流程就走完了!


项目打包遇到各种问题

那么接下来,就说说我真正的错误之路吧:

省略一些中间的步骤,直到上面所说的第四步为止,我一切都还是顺利的。

那么问题就出在第五步上,yarn electron:build

问题1

运行此命令时,一开始还是挺顺利的,但是很快遇到了第一个问题:

⨯ Get "https://github.com/electron/electron/releases/download/v18.2.2/electron-v18.2.2-win32-x64.zip"

当遇到打包报错,肯定是哪里不会搜哪里了,发现原因还是和github.com连接有关,根据网上找到的参考文章,可以通过先将electron-v18.2.2-win32-x64.zip下载下来,然后放到C:\Users\Administrator\AppData\Local\electron\Cache文件夹下。

参考文章:

同时分享一下下载包地址:

但是很尴尬的是,我Local下这并没有electron文件夹。那么能否自己创建一个然后放入呢?

答案:不行,自己创建了一个electron也没有用,后来想是不是因为我没有全局安装electron,可以把这放入项目的node_modules里,不过还是失败了,只能另辟蹊径,在.npmrc中进行配置。 (后面的nsis和winCodeSign也同样如此)

其实这可能和这台电脑一开始的配置有关系,因为后来我使用自己笔记本,发现Local下是存在electronelectron-builder两个文件夹的。

在下载文件到本地失败后,我采用在.npmrc中进行设置electron_mirror路径的方式。

.npmrc的打开路径在C:\Users\用户文件夹下,同时也可以使用cmd命令直接打开此文件:npm config edit

然后通过添加一句话:electron_mirror=https://npm.taobao.org/mirrors/electron/

这样electron-v18.2.2-win32-x64.zip包就能够成功安装了

问题2

成功解决了electron-v18.2.2-win32-x64.zip的问题之后,我又遇到了新的问题:

⨯ Get "https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z"

⨯ cannot resolve https://registry.npmmirror.com/-/binary/electron-builder-binariesnsis-3.0.4.1/nsis-3.0.4.1.7z

这两种同样也是在.npmrc中进行配置的,添加的是electron-builder-binaries_mirror的路径:

electron-builder-binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/

PS: 其实一开始我添加的是https://registry.npmmirror.com/binary.html?path=electron-builder-binaries/路径,但是发现会出现报错,没有https://registry.npmmirror.com/binary.html?path=electron-builder-binaries/nsis-3.0.4.1/nsis-3.0.4.1.7z这个地址,然后经过实际下载才发现nsis-3.0.4.1.7z的地址是https://registry.npmmirror.com/-/binary/electron-builder-binaries/nsis-3.0.4.1/nsis-3.0.4.1.7z,所以对electron-builder-binaries_mirror进行了重新设置,然后成功了

现在让我重新进行打包,发现到此,没有出现任何报错,并且打包成功了

我遇到的问题终于解决了,和网上找到的直接下载包到本地方式不同,解决方案是修改了下载源。最后我发现成功一次之后,把.npmrc中的修改下载源注释掉后续打包也可以成功了 😕


总结

这个打包问题当时改的我心累,因为我下载到本地也还是不成功,最后修修改改,通过.npmrc修改成功。期间甚至想放弃electron-builder这种方式打包,中间我去用了一下Electron Forge。发现这个居然输入命令要在git bash里,并且会对你的package.json重写,这还是算了。

现在electron打包应该还有一种electron-package的方式,不过我没有去尝试,可能也是当时对builder已经上头了,一心要解决掉这个报错。

遇到报错,努力一把,总会攻克的。(当然这个问题困了你一天以上,建议找找其他替代方案)

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。