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，按下圖的文件夾放置：

帶文件夾解壓後放在相應的目錄下，這樣才能識別。