electron打包：electron-packager及electron-builder兩種方式實(shí)

KaltZK 發(fā)布于2019-08-22 15:38 / 3202人閱讀

摘要：前言本文主要介紹如何通過及兩種方式，將已有的應(yīng)用打包成格式和可執(zhí)行文件。導(dǎo)致了在打包的過程中非常慢。由于是初次接觸，如讀者在文中發(fā)現(xiàn)錯(cuò)誤，請(qǐng)及時(shí)指正。

前言

本文主要介紹如何通過electron-packager及electron-builder兩種方式，將已有的electron應(yīng)用打包成msi格式和exe可執(zhí)行文件。打包是一個(gè)成熟的應(yīng)用程序一個(gè)重要的環(huán)節(jié)，希望這篇文章可以給大家一些參考，最后會(huì)講到打包時(shí)遇到的一些坑，與大家分享。

本文適用于有一些electron實(shí)踐經(jīng)驗(yàn)的小伙伴，知道如何創(chuàng)建一個(gè)簡(jiǎn)單的electron應(yīng)用，并且知道electron主進(jìn)程、渲染進(jìn)程間如何通信。

electron-packager

使用命令 npm install electron-packager --save-dev 安裝好之后會(huì)在package.json中的devDependencies生成代碼:

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

注意：1、打包時(shí)要分清devDependencies與dependencies的區(qū)別，文章后會(huì)講。
2、package.json 的額外字段 —— productName、author 和 description，雖然這幾個(gè)字段并不是打包必備的，但它們會(huì)在 Windows 的 Squirrel 安裝包（用于自動(dòng)更新）中使用到，所以請(qǐng)讀者根據(jù)實(shí)際情況添加。

安裝好模塊之后，就可以對(duì)應(yīng)用進(jìn)行打包。electron-packager的打包基本命令是：

electron-packager

參數(shù)說明：

sourcedir：項(xiàng)目所在路徑

appname：應(yīng)用名稱

platform：確定了你要構(gòu)建哪個(gè)平臺(tái)的應(yīng)用（Windows、Mac 還是 Linux）

architecture：決定了使用 x86 還是 x64 還是兩個(gè)架構(gòu)都用

electron version：electron 的版本

optional options：可選選項(xiàng)

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

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

然后在命令行中執(zhí)行npm run package

打包成功后，會(huì)在OutApp目錄（此處的目錄是在參數(shù)中配置的）下生成.exe，運(yùn)行該文件，并且沒有報(bào)錯(cuò)，則說明本次打包成功。

特點(diǎn)：1、支持平臺(tái)有：Windows (32/64 bit)、OS X (also known as macOS)、Linux (x86/x86_64);
2、進(jìn)行應(yīng)用更新時(shí)，使用electron內(nèi)置的autoUpdate進(jìn)行更新
3、支持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.

簡(jiǎn)單的說，electron-builder就是有比electron-packager有更豐富的的功能，支持更多的平臺(tái)，同時(shí)也支持了自動(dòng)更新。除了這幾點(diǎn)之外，由electron-builder打出的包更為輕量，并且可以打包出不暴露源碼的setup安裝程序。考慮到以上幾點(diǎn)，我果斷選擇了electron-builder （微笑

首先，依舊是安裝依賴。
（這里官方強(qiáng)烈推薦使用yarn安裝依賴包，但我使用了npm安裝的依賴也可以正常打包，所以至于為什么官方強(qiáng)烈推薦用yarn，我還沒搞懂其原因，還請(qǐng)了解緣由的大佬們賜教）

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"
},

在命令行中執(zhí)行npm run dist ，執(zhí)行結(jié)果如下：

打包后在dist目錄生成如下文件：

解壓zip包或執(zhí)行setup安裝文件，應(yīng)用啟動(dòng)后且沒有報(bào)錯(cuò)，則說明本次打包成功。

特點(diǎn)：1、electron-builder 可以打包成msi、exe、dmg文件，macOS系統(tǒng)，只能打包dmg文件，window系統(tǒng)才能打包exe，msi文件；
2、幾乎支持了所有平臺(tái)的所有格式；
3、支持Auto Update；
4、支持CLI和JS API兩種使用方式；

坑

研究electron打包的過程中踩了不少坑，打包涉及到不少系統(tǒng)級(jí)別的問題，從最初的選型到最后的成功打包，看似是個(gè)簡(jiǎn)單的過程，但其中仍有一些需要注意到的地方，我在這里分兩點(diǎn)說明：

devDependencies與dependencies的區(qū)別

dependencies 表示我們要在生產(chǎn)環(huán)境下使用該依賴，devDependencies 則表示我們僅在開發(fā)環(huán)境使用該依賴。在打包時(shí)，一定要分清哪些包屬于生產(chǎn)依賴，哪些屬于開發(fā)依賴，尤其是在項(xiàng)目較大，依賴包較多的情況下。若在生產(chǎn)環(huán)境下錯(cuò)應(yīng)或者少引依賴包，即便是成功打包，但在使用應(yīng)用程序期間也會(huì)報(bào)錯(cuò)，導(dǎo)致打包好的程序無法正常運(yùn)行。

npm與cnpm的區(qū)別

說到npm與cnpm的區(qū)別，可能大家都知道，但大家容易忽視的一點(diǎn)，是cnpm裝的各種node_module，這種方式下所有的包都是扁平化的安裝。一下子node_modules展開后有非常多的文件。導(dǎo)致了在打包的過程中非常慢。但是如果改用npm來安裝node_modules的話，所有的包都是樹狀結(jié)構(gòu)的，層級(jí)變深。

由于這個(gè)不同，對(duì)一些項(xiàng)目比較大的應(yīng)用，很容易出現(xiàn)打包過程慢且node內(nèi)存溢出的問題（這也是在解決electron打包過程中困擾我比較久的問題，最后想到了npm與cnpm的這點(diǎn)不同，解決了node打包內(nèi)存溢出的問題，從打包一次一小時(shí)優(yōu)化到打包一次一分鐘，極大的提高了效率）。

所以建議大家在打包前，講使用cnpm安裝的依賴包刪除，替換成npm安裝的依賴包。

寫在最后

本次研究electron的目的是為electron自動(dòng)更新做前期準(zhǔn)備，下篇文章我將分享如何實(shí)現(xiàn)electron應(yīng)用的版本更新。由于是初次接觸electron，如讀者在文中發(fā)現(xiàn)錯(cuò)誤，請(qǐng)及時(shí)指正。
如有問題，歡迎私信、微信交流，WeChat：zeus9447
(*￣︶￣)