electron-builder打包问题记录

伟大的兔神
6,138 阅读5分钟

前言

因工作需要，使用electron开发一款桌面应用。

介于以下两点原因未使用electron-vue类似的项目脚手架：

① 应用较小，复杂度低；

② 打包体积；

③ 巩固基础，直接写原生。

吐槽一下：对框架的依赖性导致现在大多数的开发者，基础能力都很差。

正文

对打包这块，一开始参照electorn官网教程，使用的是Electorn Forge来打包，但是就如官网所说，这个最快捷的打包方式，只是简单易用，可配置程度也较低，我去翻了官网文档，很多我期望的功能并没有提供配置选项，所以考虑放弃。紧接着尝试Electron Builder打包， electorn官网对此介绍如下：

Electron Builder是一个完备的Electron应用打包和分发解决方案，它致力于软件开发的集成体验。

现在我想说的就是嗯，用过了，确实很好用！

直接放我的package.json文件（注意json文件里不能写注释，我下面只是辅助说明）：

{
  "name": "rabbit",
  "version": "1.0.0",
  "description": "rabbit",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "win32": "electron-builder --win --ia32",
    "win64": "electron-builder --win --x64",
    "mac": "electron-builder --mac",
    "linux": "electron-builder --linux"
  },
  "author": "rabbit",
  "license": "MIT",
  "devDependencies": {
    "electron": "^13.1.7",
    "electron-builder": "^22.11.7"
  }
  "build": {
    "productName": "rabbit",
    "appId": "com.rabbit.client",
    "copyright": "© 伟大的兔神 2021",
    "directories": {
      "output": "dist"
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true, // 允许用户自定义安装目录
      "installerIcon": "icon.ico",
      "uninstallerIcon": "icon.ico",
      "installerHeaderIcon": "icon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "rabbit"
    },
    "win": {
      "icon": "icon.ico",
      "requestedExecutionLevel": "requireAdministrator", // 获取管理员权限
      "target": [
        {
          "target": "nsis"
        }
      ],
      "extraFiles": { // 安装后会将源码 from 文件夹下的文件拷贝到 安装目录的 to 文件夹下
        "from": "./from/",
        "to": "to"
      }
    },
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "html/icon.ico"
    },
    "linux": {
      "icon": "html/icon.ico"
    }
  }
}

一般的，配置好这个文件，打包都不会有什么问题。虽然这个配置使得我可以在64位的机器上可以打出32位的包，因为不懂打包原理，所以小心翼翼，我怕由于64位机器因为与32位机器环境及一些东西的不同导致最终打的包在投入生产后出现问题，或许你觉得没啥问题，但是看图说话：

image.png

很明显打包后的体积都不一样大，少了什么多了什么的，说不清。

所以我还是专门找了个32位的机器去打包，如上图不幸的是这个32位的机器是win7系统，此时问题就出现了：

第一个问题：node环境安装

在NodeJS官网下载了最新的安装包，点击安装，弹窗直接说：win7不支持安装。

那意思就是这个安装包太新了呗，win7接受不了，得找个win7支持的版本安装。

但是版本也不能太低，因为新版本总归会多一些东西。最终找到的支持的版本号位v12.22.4，最终下载的是node-v12.22.4-x86.msi这个安装包。

第二个问题：npm Error

安装好node环境后，执行npm run win32打包，直接报错npm Error，控制台说：你的npm 版本可能存在一个问题。

那意思就是我的npm版本不适合呗，执行npm -v查看npm的版本号。思考npm run win32实际执行的是electron-builder --win --ia32这条命令，那么很大部分原因就是electron-builder这个依赖包的运行平台不匹配。我翻找node_modules目录下的electron-builder模块，如下图：

image.png

该模块指定了 "engines": { "node": ">=14.0.0" } ，即限定运行平台node版本需大于等于v14.0.0，而我安装的是v12.22.4，所以不匹配导致打包失败。

第三个问题：再降NodeJS的版本？

我没有选择再降NodeJS的版本，反之来降electron-builder的版本，我最终找到的是v22.11.1。

image.png

以为万事大吉，终于可以成功打包了，但还是失败了，执行命令时又出现了下载问题。

第四个问题：下载问题

这块的问题我就直接搬运了，因为确实解决了我的问题，证实有用。

下面摘自Electron-builder打包详解

  • NPM下载的问题

    因为NPM在国内比较慢。导致electron-V.xxxx.zip下载失败。这些东西如果是第一次打包的话是需要下载对应electron版本的支持文件。解决办法有两个

    1. 设置镜像：在C盘User中找到.npmrc文件。然后加入下面这句代码,但是这个有时候也不是很好用
    ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
复制代码
    1. 直接去淘宝镜像文件库找到对应的文件并下载，放到指定的目录下，electron的淘宝镜像地址。下载完之后放到指定的文件。一般文件得地址在C:\Users\Administrator\AppData\Local\electron\Cache。例如我要下载1.8.4版本的electron，那么找到镜像下得文件然后放到指定文件夹中。

    (如果是在执行npm install时下载不下来)直接在淘宝镜像下载对应版本的zip，然后扔到C:\Users\YourUserName.electron就行

    这就解决了这个问题，简单又暴力。

  • NSIS下载问题

    如果你要打NSIS得包还需要再下载nsis-resources-xxx等等包。经过上面得经验这下我们知道缺什么就填什么呗，通过错误日志我们可以得到我们要下载得版本，一般错误中通常会展示github下载地址，直接点开连接去下载。但是位置这次不一样了。因为这是electron-builder的支持环境所以我们要放在C:\Users\Administrator\AppData\Local\electron-builder\cache\nsis下了。

一般情况下解决这些问题的思路就是，缺什么拿什么。

在解决了下载问题后，终于打包成功！！！

总结

本文看似只是针对打包的问题一个记录，但实际上讲的是一个解决问题的思路，遇到问题如何去查找验证，一步步解决，能力就是在一步步探索中提高的。

avatar
文章
阅读
粉丝