Electron打包心得

最新推荐文章于 2024-09-23 10:31:54 发布

不起眼的皮皮虾

最新推荐文章于 2024-09-23 10:31:54 发布

阅读量3.5k

点赞数 1

文章标签： node.js chrome

本文链接：https://blog.csdn.net/qq_36801250/article/details/105494948

版权

本文详述使用Electron-builder进行跨平台打包的过程，对比electron-packager的不足，介绍Yarn安装方法，解决包依赖问题，配置package.json，及处理打包时的常见错误。

摘要由CSDN通过智能技术生成

Electron-builder打包的坑

1.在准备好Electron例子之后，我选择的是electron-builder打包，而不是electron-packager打包方式
原因如下：
1）electron-builder的打包方式更直接，相对electron-packager的更粗暴（后者踩坑更为鸡肋）
2) 有更丰富的功能，
3) 支持多平台，
4) 支持更新
5) 更轻量，不暴露源码的安装程序

2.在已有示例HelloWorld前提下，通过npm,cnpm,yarn三种方法下载electron-builder组件库

此处我用的是yarn方法（官方推荐），之前用的npm出现无法下载 winCodeSign 等资源，让人很是焦灼

3.在使用yarn add electron-builder --save-dev 安装electron-builder之后，在devDependencies会生成代码

"devDependencies": {
    "electron-builder": "^22.4.1"
}

一定要分清哪些包属于生产依赖，哪些属于开发依赖，尤其是在项目较大，依赖包较多的情况下，否则会出现如下问题：

Package “electron-builder” is only allowed in “devDependencies”.
Please remove it from the “dependencies” section in your package.json.

意思就是：仅在“devDependencies”中允许使用包“electron builder”。请从package.json的“依赖项”部分删除它。

在package.json 配成这样才能程序跑起来，代码如下：

  "devDependencies": {
    "electron": "^8.2.1",
    "electron-builder": "^22.4.1"
  },
  "dependencies": {
  }

另外还需要在package.json中加上如下代码：

"build": {
    "appId": "com.xxx.app",
    "mac": {
      "target": ["dmg","zip"]
    },
    "win": {
      "target": ["nsis","zip"]
    }
},
"scripts": {
    "dist": "electron-builder --win --x64"
},

最后准备

npm run dist

关键的时候问题就来了，报错如下：


  • cannot move downloaded into final location (another process downloaded faster?)  path=C:\Users\***\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.2

在网上搜索错误的代码块，准确定位到这里，安全软件导致的下载文件同步操作被阻塞)，安全退出火绒，再次操作成功打包。

在这里插入图片描述

最后说一下，如果使用electron-packager打包方法，会有可能出现无法下载electron-v8.2.1-win32-x64.zip文件压缩包，毕竟是npm，再就是在国外，所以会出现下载失败，需要自己去下载淘宝镜像指向的压缩包，然后把压缩包（还有个一起的SHASUMS256.txt）拷贝到C盘目录下的electron\Cache下面，试了N次还是搞不定…(鸡肋)