electron-builder打包exe以及可能出现的问题

背景

最近有做一个桌面小程序的想法，因为之前用过electron，用起来还是比较顺手的。算法是之前写好的用的是python，没时间去拿js再写一遍了，也不知道有什么其他好方法调用python，所以只能用pyinstaller打包成exe文件，使用spawn直接调用文件。

但是作为一个完整的桌面程序不能每次启动都用npm start吧，还是得打包，考虑了一下还是用了electron-builder，毕竟功能比较丰富，而且可以打包成安装包，明显减小体积。

安装

 首先安装electron-builder：

npm install electron-builder -g

虽然推荐使用yarn，但是npm用习惯了，下次再改吧

配置

不像electron-packager的配置大多在命令行，builder的配置可以放在package.json里面：

  "build": {
    "productName": "xxxx",//这里是项目名
    "appId": "xxxx",//ID
    "copyright": "xxxx",//版权信息前三个随便填就好啦，反正软件也不发布，自己用
    "compression": "store",//"compression": "store", // "store" | "normal"| "maximum" 打包压缩情况(store 相对较快)
    "directories": {
        "output": "build"//输出位置
    },
    "extraResources": [
        {
            "from": "data",//这里是需要拷贝出来的路径
            "to": ""//默认根目录
        }
    ],
    "asar": true,//是否使用asar压缩
    "win": {
        "icon": "build/icons/icon.ico",
        "target": [
            "nsis",//使用nsis制作安装包
            "zip"//制作压缩包
        ]
    },
    "linux": {
        "icon": "build/icons/icon.ico"//linux环境
    },
    "nsis": {
      "oneClick": false, // 是否一键安装
      "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
      "allowToChangeInstallationDirectory": true, // 允许修改安装目录
      "installerIcon": "./build/icons/aaa.ico",// 安装图标
      "uninstallerIcon": "./build/icons/bbb.ico",//卸载图标
      "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
      "createDesktopShortcut": true, // 创建桌面图标
      "createStartMenuShortcut": true,// 创建开始菜单图标
      "shortcutName": "xxxx", // 图标名称
      "include": "build/script/installer.nsh", // 包含的自定义nsis脚本
    },
}

 script也需要修改：

"scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir ",
    "dist": "electron-builder --win --x64"
}

 一般windows系统直接使用npm run dist就好啦。

 可能出现的问题

1.主要问题在于extraResources的使用

官方文档的解释是：

A glob patterns relative to the project directory, when specified, copy the file or directory with matching names directly into the app’s resources directory (Contents/Resources for MacOS, resources for Linux and Windows).

File patterns (and support for from and to fields) the same as for files.

 在我这个项目里，我调用了python生成的exe文件和其他的一些数据文件，都是静态文件，打包之后当选择asar之后没法去读取，只能通过这种方式将这些文件拷贝到根目录下，这里的根目录指的是打包过后的resource文件夹下，打包过后的文件树如下：

可以看到除了app.asar文件以外还有拷贝出来的文件。当前运行程序所在的路径就是win-unpacked/，这时候就可以调用这些文件了。

2.还有在安装过程中可能会出现npm下载太慢的情况

比如我遇到的winCodeSign和nsis下载不成功的情况，遇到这种情况可以按照下载链接使用浏览器下载，一般情况都可以成功，下载好了之后将文件解压到C:\Users\Administrator\AppData\Local\electron-builder\Cache，按下图的文件夹放置：

带文件夹解压后放在相应的目录下，这样才能识别。