1. 程式人生 > >Electron實戰:建立ELectron開發的window應用安裝包

Electron實戰:建立ELectron開發的window應用安裝包

前言:研究electron自動更新的時候,在electron的官方文件中,提到了在幾個平臺maclinuxwindowselectron 的自動更新方法,其中windsow平臺上面,文章中建議先用模組來建立windows安裝包,grunt這個工具是由Squirrel整合的。進而瞭解下Squirrel這個工具, 一個可以用來給electron應用的安裝更新解除安裝新增快捷方式的工具。本文主要提及如何在windows平臺下,用Squirrel建立electron.exe安裝包。

建立nuget

我們的方法是使用nuget工具建立Nuget包,再使用Squirrel工具建立.exe

2.新建資料夾如my-build,把下載好的squirrel.exenuget.exesetup.exe

放進去,在資料夾放入我們未打包的electron應用,如下圖:

 

4.my-build根目錄中,開啟命令列執行nuget spec

如下圖:


生成 spec包初始檔案


5.編輯器開啟 Package.nuspec,按照自己專案的需要編輯這個檔案,如下圖:

 

這裡需要注意:根據Squirrel文件說明,target folder 屬性需要設定為lib/net45,否則並沒有用;<iconUrl>標籤用來制定未來的exeicon

5.

用下面的命令建立一個nuget包,

nuget pack Package.nuspec

如下圖:


之後在目錄中會出現這個包


命名規則就是<my_app_name>.<version>.nupkg

建立安裝程式

把應用程式打包成nuget包之後,就可以用squirrel建立一個安裝程式了。在根目錄開啟命令列,執行以下命令:

squirrel --releasify <my_app_name>.<version>.nupkg

這個時候命令列中沒有任何提示。但是別慌,編譯一段時間後程序會建立一個release資料夾,裡面有三個檔案,nuget

包,RELEASES 檔案和安裝檔案Setup.exe。如下圖:


如果沒有出現這三個檔案,可以檢視目錄中的SquirrelSetup.log,根據裡面的報錯,來進行除錯。

注意上面這條squirrel 命令,可以用來設定setup.exe在安裝過程中用傳統icon還是用自定義的圖片檔案。使用Squirrel --help可以檢視更多幫助

釋出應用和安裝應用

把上一步生成的setup.exe傳送給想要安裝這個應用的使用者,就可以了。

最終應用會被安裝在C:\Users\Administrator\AppData\Local\[appname] 資料夾中,注意Squirrel 的日誌檔案也存在目錄中,除錯安裝問題的時候非常有用。

雙擊我們的setup.exe進行安裝app的測試,如果中途有任何出錯,在

C:\Users\Administrator\AppData\Local\SquirrelTemp 裡面可以看到安裝日誌。如下圖:


安裝之後開啟C:\Users\Administrator\AppData\Local 目錄,可以看到app安裝在這裡,如下圖:


自動建立快捷方式

進入我們安裝之後的資料夾,命令列進入C:\Users\Administrator\AppData\Local\[your appname],執行 Update.exe --help ,可以看到


不知道從上圖你有沒有得到什麼提示,反正我發現了,在命令列手動建立快捷方式的命令是Update.exe --createshortcut electron\electron.exe -i  [your ico toute]\app.ico

所以,如果我們想讓應用在安裝過程中靜默地建立好快捷方式,那就需要在app的安裝之後相反設法執行這句程式碼。

因為我們的.exe會在安裝之後自動開啟程式,所以我在程式的入口main.js,新增sqruieel事件的監聽就好了。如下圖:


我順便把程式解除安裝時,刪除快捷方式的監聽事件也寫了進去。還有程式的更新和刪除事件監聽,但是這兩個事件,我還沒有進行測試。

更新應用

其實我一直很想做增量更新,在這裡我的更新方法有兩個,第一是在程式的入口新增js,傳送請求到伺服器,拉取更改檔案進行本地替換,但是如果是node_module依賴包的更改,這個方法並不可行。第二個方法比較安全而且快捷通過釋出一個版本號不同的exe,如下:1.在這個建立安裝程式的步驟2中,我們把程式程式碼都複製到了這個資料夾裡面,如下圖:


如果後續我們的程式要進行更新,首先我們需要把更改的檔案直接複製替換到這個資料夾。

2.開啟Package.nuspec,編輯version標籤


3.參考本文種中建立安裝程式部分的步驟2-4,重新生成setup.exe,釋出應用。

通過執行setip.exe安裝,程式會自動刪除之前的應用,但是我並不清楚,sqruieel 是進行了增量替換,還是將之前的整個應用進行刪除,再重新安裝。

建立自定義安裝包

在上一步,我們已經把自己的exe釋出出來了,但是如果沒有自定義名字跟icon,好像還不夠酷,所以我們需要建立自定義的安裝檔案。

2.開啟這個專案目錄,在electron.exe上面右鍵


出現選單,點選 Open using Rescource Hacker

3.Resource Hacker應用執行之後中,在以下介面中選擇Icon,然後在工具欄裡面選擇ActionReplace Icon,如下圖:

 

然後選擇自己想要替換的.ico檔案就好

4.這其實並不夠,我們還需要更換exe裡面的版本資訊,開啟Version Info,把FileDescriptionProductName改成我們自己的專案名稱,最好把SquirrelAwareVersion也更改一下,畢竟是版本號。


5.做完這些之後,我們需要按照之前的步驟,在命令列中輸入

nuget pack Package.nuspec

重新生成nuget包,然後再使用

 squirrel --releasify <my_app_name>.<version>.nupkg 命令建立安裝檔案。

6.開啟之後生成的releases資料夾,參考本文種中建立安裝程式部分的步驟2-4,對setup.exe進行自定義。


最後,一個可以自動更新又安裝便捷,還有我們自己的酷酷的圖示跟名字的應用就生成拉!