Electron筆記之打包發佈程序


Electron提供了兩個打包工具,本文將分別嘗試使用兩個工具對項目打包,並分析其打出來的包的結構。

一、使用electron-builder打包

https://github.com/electron-userland/electron-builder

先安裝此工具:

npm install electron-builder -g

確認是否安裝成功:

0

這裏是以官方以供的electron-quick-start項目作爲例子打包,這個項目的倉庫:

https://github.com/electron/electron-quick-start

打包前需要先爲項目添加一些打包選項,編輯項目根目錄下的package.json文件,爲其添加build選項:

"build": {
  "appId": "cc11001100.electron.example-001", // 程序包名
  "copyright": "CC11001100", // 版權相關信息
  "productName": "example-001",  // 項目名字
  "dmg": {
    "background": "res/background.png",  // 背景圖片的路徑
    "window": {
// 啓動後窗口左上角位置 
      "x": 100,
      "y": 100,
// 啓動後窗口的大小
      "width": 500,
      "height": 300
    }
  },
  "win": {
// 打包後的文件會有個圖標,這個圖標的路徑,不指定的話默認的不好看 
    "icon": "res/logo.png"
  }

然後在項目的根路徑下執行:

electron-builder

即可開始打包:

1

因爲我這兒已經不是第一次打包了,所以輸出內容比較少,第一次打包的話會根據不同平臺下載一些對應的文件,因爲Electron打包是要把Chromium的運行時打包進去的,這也是Electron開發的程序被人詬病的一個地方(另一個著名的梗就是Electron開發的程序普遍很卡、喫內存,用腳想想跑在瀏覽器上它能不卡不喫內存嗎...),所以哪怕是一個很簡單的小玩具,打包出來可能都要好幾十M。

如果每次打包的時候都要執行此命令比較麻煩的話,可以爲package.json添加一個dist命令:

2

Electron是跨平臺的,這個跨平臺是藉助的統一的運行時node+Chromium,這倆可不是跨平臺的,所以在打包的時候要指定平臺然後下載對應平臺這倆的版本作爲運行時打到包裏,如果不指定的話,默認會打適合當前系統環境的包:

electron-builder --platform=darwin

electron-builder --platform=win32

electron-builder --platform=linux

更多詳細選項請查閱GitHub倉庫上的文檔,這裏只是一個引子知道有這麼個玩意兒。


二、分析electron-builder打出來的包

electron-builder打包成功的文件會放在項目根目錄的dist文件夾下:

3

這個exe文件就是win平臺的運行包,雙擊即可運行,嘗試只將這一個exe文件拷貝到一個單獨的文件夾會發現也是可以運行的。

但是這個exe文件實際上是一個壓縮文件,將後綴改爲zip然後使用壓縮文件打開:

4

解壓到本地,看下都有哪些文件:

5

這個文件夾下的example-001.exe也是能夠運行的,其它的都是一些亂七八糟的依賴庫之類的,我們的關注點不在這個上面,徑直進入resources這個文件夾,這裏面有個叫app.asar的文件:

6

這個asar格式的文件其實就是一個歸檔文件,可以安裝asar:

npm i asar -g

然後到這個目錄直接解壓這個文件:

asar e app.asar app

進去一看,好傢伙,整個項目的代碼都在這放着呢:

7

隨便打開一個看下,發現連混淆都沒有混淆:

8

asar格式的文件就是一個歸檔文件,只不過它的歸檔方式是採用了另一種結構,但是隻需要按照它的結構解包就能得到原始的文件,解包用它提供的命令即可都不用自己寫。


三、使用electron-packager打包

https://github.com/electron-userland/electron-packager

首先將這個工具安裝到項目的開發環境依賴:

npm install electron-packager --save-dev

工具使用的格式爲:

electron-packager < sourcedir > < appname > --platform= < platform > --arch= < arch> [optional flags...]

然後直接打包就可以了:

9

默認是打包當前平臺的版本,如果需要打包其他版本,則通過--platform指定,這裏不再詳述,直接去GitHub查閱官方文檔。


四、分析electron-packager打出來的包

這是electron-packager打包出來的代碼,同樣有個exe程序,不過這裏關注的重點仍然是resources文件夾:

10

進入看一下,只有一個app.asar文件:

11

和前面那個打包工具一樣,這個打包工具如果不在打包的時候指定--asar的話連歸檔不會歸檔,直接就把源代碼放在這個路徑下了。用asar解包看下它的內容:

12

進入app看一下,果然正是項目的源碼:

13


五、總結

1. Electron是跨平臺的,打包的時候需要區分不同的平臺打包。

2. Electron對源代碼打包的方式是asar,這是一個歸檔格式,這意味着源代碼並沒有加密,逆向成本非常低,解個包能看懂JS和Electron就行。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章