electron用electron-builder簡單打包

-

打包過程中遇到的問題：

1、剛開始打包沒成功，報錯從github上拉取的資源比較大，提示下載資源失敗；原因是electron在打包時，會從本地cache緩存中讀取所需資源（用戶/Appdata/Lacal/electron/各種資源），如果本地沒有緩存，就會從github上下載，

國內下載會比較慢，經常會遇到超時；解決辦法是用yarn鏡像打包；多打包幾次；這樣本地緩存文件會逐漸全面；總有一次會打包成功；

2、另外報錯fs/promise不存在；原因是node版本比較低；我原來使用12版本的node；后來換成了現在的16.12.0；最后成功打包；

下面說一下打包步驟：

安裝electron-builder

npm install electron-builder --save-dev

package.json

配置一下打包命令：

{
  "name": "electronTest",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "electron .",
    "build": "electron-builder" //打包命令
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "electron": "^16.0.6",
    "electron-builder": "^22.14.5"
  }
}

執行打包命令，會在根目錄生成dist文件：

 

 雙擊electronTest Setup 1.0.0.exe 安裝

 

 打開文件位置看看打包后的目錄：

 

 看看resource文件下的文件：

 

 看到打包后被壓縮成了asar文件

下面我們把app.asar文件反向解壓出來看看是什么：

首先全局裝一個asar的node包

npm install asar -g

在app.asar文件所在目錄，打開dos窗口，執行以下命令，將app.asar解壓：

asar extract app.asar ./

 

 

 上圖中紅框框起來的就是解壓出來的文件，和未打包前的文件完全一樣

 以上是electron-builder最簡單的打包步驟，如果項目復雜，需要定制化需求，比如怎么換圖標，第三方插件怎么打包；需要做更加深入的配置；

 

 

 

-