electron打包：electron-packager及electron-builder兩種方式實現（for Windows）

前言

本文主要介紹如何經過electron-packager及electron-builder兩種方式，將已有的electron應用打包成msi格式和exe可執行文件。打包是一個成熟的應用程序一個重要的環節，但願這篇文章能夠給你們一些參考，最後會講到打包時遇到的一些坑，與你們分享。

本文適用於有一些electron實踐經驗的小夥伴，知道如何建立一個簡單的electron應用，而且知道electron主進程、渲染進程間如何通訊。

electron-packager

使用命令 npm install electron-packager --save-dev 安裝好以後會在package.json中的devDependencies生成代碼:

"devDependencies": {
    "electron-packager": "^9.1.0"
}

注意：

一、打包時要分清devDependencies與dependencies的區別，文章後會講。
二、package.json 的額外字段 —— productName、author 和 description，雖然這幾個字段並非打包必備的，但它們會在 Windows 的 Squirrel 安裝包（用於自動更新）中使用到，因此請讀者根據實際狀況添加。

安裝好模塊以後，就能夠對應用進行打包。electron-packager的打包基本命令是：

electron-packager <sourcedir> <appname> <platform> <architecture> <electron version> <optional options>

參數說明：

• sourcedir：項目所在路徑
• appname：應用名稱
• platform：肯定了你要構建哪一個平臺的應用（Windows、Mac 仍是 Linux）
• architecture：決定了使用 x86 仍是 x64 仍是兩個架構都用
• electron version：electron 的版本
• optional options：可選選項

爲了方便起見，在package.json中添加代碼：

"scripts": {
    "package": "electron-packager ./ myapp --out ./OutApp --version 1.7.9 --overwrite --icon=./app/img/icon/icon.ico"
  }

而後在命令行中執行npm run package

打包成功後，會在OutApp目錄（此處的目錄是在參數中配置的）下生成.exe，運行該文件，而且沒有報錯，則說明本次打包成功。

特色：

一、支持平臺有：Windows (32/64 bit)、OS X (also known as macOS)、Linux (x86/x86_64);
二、進行應用更新時，使用electron內置的autoUpdate進行更新
三、支持CLI和JS API兩種使用方式；

electron-builder

首先來看看什麼是electron-builder，來自官方的解釋：

A complete solution to package and build a ready for distribution Electron, Proton Native or Muon app for macOS, Windows and Linux with 「auto update」 support out of the box.

簡單的說，electron-builder就是有比electron-packager有更豐富的的功能，支持更多的平臺，同時也支持了自動更新。除了這幾點以外，由electron-builder打出的包更爲輕量，而且能夠打包出不暴露源碼的setup安裝程序。考慮到以上幾點，我果斷選擇了electron-builder &nbsp&nbsp&nbsp&nbsp&nbsp （微笑

首先，依舊是安裝依賴。
（這裏官方強烈推薦使用yarn安裝依賴包，但我使用了npm安裝的依賴也能夠正常打包，因此至於爲何官方強烈推薦用yarn，我還沒搞懂其緣由，還請了解原因的大佬們賜教）

yarn add electron-builder --save-dev

在package.json中作以下配置

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

在命令行中執行npm run dist ，執行結果以下：

打包後在dist目錄生成以下文件：

解壓zip包或執行setup安裝文件，應用啓動後且沒有報錯，則說明本次打包成功。

特色：

一、electron-builder 能夠打包成msi、exe、dmg文件，macOS系統，只能打包dmg文件，window系統才能打包exe，msi文件；
二、幾乎支持了全部平臺的全部格式；
三、支持Auto Update；
四、支持CLI和JS API兩種使用方式；

坑

研究electron打包的過程當中踩了很多坑，打包涉及到很多系統級別的問題，從最初的選型到最後的成功打包，看似是個簡單的過程，但其中仍有一些須要注意到的地方，我在這裏分兩點說明：

devDependencies與dependencies的區別

dependencies 表示咱們要在生產環境下使用該依賴，devDependencies 則表示咱們僅在開發環境使用該依賴。在打包時，必定要分清哪些包屬於生產依賴，哪些屬於開發依賴，尤爲是在項目較大，依賴包較多的狀況下。若在生產環境下錯應或者少引依賴包，即使是成功打包，但在使用應用程序期間也會報錯，致使打包好的程序沒法正常運行。

npm與cnpm的區別

說到npm與cnpm的區別，可能你們都知道，但你們容易忽視的一點，是cnpm裝的各類node_module，這種方式下全部的包都是扁平化的安裝。一會兒node_modules展開後有很是多的文件。致使了在打包的過程當中很是慢。可是若是改用npm來安裝node_modules的話，全部的包都是樹狀結構的，層級變深。

因爲這個不一樣，對一些項目比較大的應用，很容易出現打包過程慢且node內存溢出的問題（這也是在解決electron打包過程當中困擾我比較久的問題，最後想到了npm與cnpm的這點不一樣，解決了node打包內存溢出的問題，從打包一次一小時優化到打包一次一分鐘，極大的提升了效率）。

因此建議你們在打包前，講使用cnpm安裝的依賴包刪除，替換成npm安裝的依賴包。

寫在最後

本次研究electron的目的是爲electron自動更新作前期準備，下篇文章我將分享如何實現electron應用的版本更新。因爲是初次接觸electron，如讀者在文中發現錯誤，請及時指正。若有問題，歡迎私信、微信交流，WeChat：zeus9447(*￣︶￣)