基于Umi搭建Electron App

一、環(huán)境準(zhǔn)備與基礎(chǔ)搭建

在開始開發(fā)之前，我們需要做好充分的環(huán)境準(zhǔn)備。安裝Node.js并配置好相應(yīng)的環(huán)境，推薦使用nvm來管理多個版本的Node，以確保開發(fā)的流暢性。針對Umi+Antd+Electron這一特定框架，建議使用經(jīng)過驗(yàn)證的特定Node和Npm版本來確保開發(fā)流程的順利進(jìn)行。

二、集成Ant Design與參考搭建步驟

為了集成Ant Design作為我們的UI庫，推薦直接參考Ant Design Pro的搭建步驟。相較于UmiJS，這可以為我們節(jié)省大量集成的時間。對于Windows系統(tǒng)用戶，在搭建過程中可能會遇到一些特定問題，需要找到相關(guān)文件并嚴(yán)格按照步驟操作來解決。

三、Umi項(xiàng)目生成與配置

使用create-umi命令生成React項(xiàng)目時，我們需要仔細(xì)選擇配置選項(xiàng)以確保項(xiàng)目按照我們的需求進(jìn)行搭建。在此過程中，應(yīng)特別注意避免覆蓋已有文件，確保正確配置。執(zhí)行命令后，我們即可擁有了一個基于Umi的React項(xiàng)目。

四、Electron應(yīng)用開發(fā)與配置

在Electron應(yīng)用中，我們需要引入Electron依賴并編寫主進(jìn)程文件main.js。這一過程需要嚴(yán)格按照Electron官網(wǎng)的文檔操作，確保使用正確的命令加載URL，并與Webpack的devServer配置保持一致。在配置Electron主進(jìn)程文件時，特別需要注意端口的使用，確保與Webpack的配置相匹配。若本地端口被占用，我們可以通過配置文件或環(huán)境變量來調(diào)整。

五、打包與發(fā)布Electron App

當(dāng)我們的應(yīng)用開發(fā)完成后，接下來就是打包發(fā)布。這里我們使用electron-builder作為打包工具，并根據(jù)不同的操作系統(tǒng)進(jìn)行相應(yīng)的配置。打包配置中，我們需要關(guān)注一些關(guān)鍵參數(shù)的設(shè)定，如appId、productName以及輸出目錄等。還需要考慮調(diào)整歷史路由模式、publicPath以及outputPath等參數(shù)，確保webpack的配置適應(yīng)Electron的打包需求。 在Electron的主進(jìn)程文件中，我們需要根據(jù)生產(chǎn)環(huán)境和開發(fā)環(huán)境的不同，處理加載渲染進(jìn)程的方式，以避免打包后出現(xiàn)如白屏等問題。通過調(diào)整腳本命令，我們可以確保在不同環(huán)境下正確啟動Electron應(yīng)用。 為了優(yōu)化Electron App的打包體積，我們可以采取一些策略，如調(diào)整資源壓縮、使用更高效的打包工具或技術(shù)。完成搭建后，我們可以將框架分享至Gitee等平臺，供社區(qū)成員學(xué)習(xí)和使用。

electron開發(fā)界面：如何連接底層

一、electron自動更新與Squirrel工具簡介

在研究electron的自動更新時，我們了解到Squirrel這個工具可以為我們electron應(yīng)用的安裝、更新和卸載添加快捷方式。本文將介紹如何在Windows平臺下使用Squirrel創(chuàng)建electron的.exe安裝包。

二、創(chuàng)建NuGet包

我們的方法是使用NuGet工具創(chuàng)建NuGet包。為此，我們需要下載nuget.exe工具。使用Squirrel創(chuàng)建exe安裝包前需要先創(chuàng)建一個NuGet包。

三、使用Squirrel創(chuàng)建exe安裝包

下載squirrel.exe后，我們可以通過簡單的命令或腳本調(diào)用Squirrel來生成安裝包。也可以選擇安裝Squirrel.Windows（需要搭配Visual Studio環(huán)境）。安裝完成后，我們就可以使用Squirrel來創(chuàng)建我們的electron應(yīng)用的.exe安裝包。 至此，我們已經(jīng)完成了electron開發(fā)界面的底層連接工作。通過Squirrel工具創(chuàng)建的exe安裝包可以方便我們在Windows平臺上進(jìn)行electron應(yīng)用的分發(fā)和部署。

新建文件夾并指導(dǎo)應(yīng)用程序打包成NuGet包及安裝程序指南

章節(jié)一：準(zhǔn)備工作

新建文件夾存儲相關(guān)文件

在你的文件系統(tǒng)中，創(chuàng)建一個名為“my-build”的新文件夾。這個文件夾將用于存放即將進(jìn)行打包的exe文件和其他相關(guān)工具。將下載好的squirrel.exe、nuget.exe和setup.exe放入此文件夾。將未打包的electron應(yīng)用也移至該文件夾內(nèi)。以下是文件結(jié)構(gòu)示意：

章節(jié)二：生成NuGet包的spec文件

在命令行中執(zhí)行nuget spec命令

打開“my-build”根目錄中的命令行界面，執(zhí)行“nuget spec”命令。此操作將生成一個初始的spec包文件，該文件是NuGet包的基礎(chǔ)配置模板。

章節(jié)三：編輯Package.nuspec文件

按需編輯Package.nuspec文件

使用編輯器打開剛剛生成的Package.nuspec文件，根據(jù)你的項(xiàng)目需求進(jìn)行編輯。這里需要注意Squirrel文檔說明中的兩點(diǎn)：一是target folder屬性需設(shè)置為lib/net45；二是標(biāo)簽用于指定未來exe的圖標(biāo)。

章節(jié)四：創(chuàng)建NuGet包

使用命令創(chuàng)建NuGet包

在命令行中，運(yùn)行“nuget pack Package.nuspec”命令。這將根據(jù)你剛剛編輯的spec文件，創(chuàng)建一個名為..nupkg的NuGet包。命名規(guī)則遵循此格式。

章節(jié)五：創(chuàng)建安裝程序

使用Squirrel創(chuàng)建安裝程序

完成NuGet包的打包后，使用Squirrel工具來創(chuàng)建安裝程序。在“my-build”的根目錄打開命令行，執(zhí)行命令“squirrel--releasify ..nupkg”。這個過程不會立即顯示結(jié)果，但會在一段時間后創(chuàng)建一個release文件夾。該文件夾內(nèi)包含三個重要文件：NuGet包、RELEASES文件和安裝文件Setup.exe。如果在過程中遇到問題，可以查看SquirrelSetup.log日志進(jìn)行調(diào)試。注意，Squirrel提供了豐富的命令行選項(xiàng)，可以通過執(zhí)行Squirrel--help查看更多幫助信息。

章節(jié)六：發(fā)布和應(yīng)用安裝程序

分發(fā)安裝應(yīng)用

第一章：應(yīng)用安裝與文件位置

在安裝完成后，打開C:UsersAdministratorAppDataLocal目錄，你會發(fā)現(xiàn)我們的應(yīng)用已安裝在此。通過此路徑，你可以直接進(jìn)入應(yīng)用的安裝文件夾。

第二章：快捷方式的自動創(chuàng)建

在我們的應(yīng)用安裝完成后，會自動生成快捷方式。進(jìn)入安裝后的文件夾，通過命令行進(jìn)入特定路徑，執(zhí)行Update.exe--help命令，你會看到相關(guān)的操作提示。特別地，創(chuàng)建快捷方式的命令是Update.exe--createshortcut electronelectron.exe-i [your ico toute]app.ico。

第三章：快捷方式的靜默創(chuàng)建與程序入口

為了讓應(yīng)用在安裝過程中能靜默地創(chuàng)建好快捷方式，我們需要在應(yīng)用的安裝后階段執(zhí)行相應(yīng)的代碼。由于我們的.exe會在安裝后自動打開程序，所以在程序的入口main.js添加sqruieel監(jiān)聽即可實(shí)現(xiàn)。我們也為程序的卸載過程添加了刪除快捷方式的監(jiān)聽。

第四章：應(yīng)用的更新方法

我們提供了兩種更新方法。第一種是在程序入口添加js，發(fā)送請求到服務(wù)器，拉取更改文件進(jìn)行本地替換。但這種方法對于node_module依賴包的更改并不適用。第二種方法更為安全和快捷：發(fā)布一個版本號不同的exe。在創(chuàng)建安裝程序的步驟中，我們將程序代碼復(fù)制到一個特定文件夾。若需更新程序，只需將更改的文件復(fù)制到該文件夾，并編輯version標(biāo)簽，重新生成setup.exe即可。

第五章：自定義安裝包的創(chuàng)建與應(yīng)用資源修改

在完成exe的發(fā)布后，我們可以為其創(chuàng)建自定義的安裝包，使其更具個性化。為了修改應(yīng)用資源，需要下載并安裝Resource Hacker。通過此工具，我們可以修改exe的圖標(biāo)（Icon）以及版本信息。選擇Resource Hacker中的Icon選項(xiàng)，然后選擇Action中的Replace Icon，再選擇想要替換的.ico文件即可完成圖標(biāo)的更換。我們還需要打開Version Info，修改FileDescription、ProductName以及SquirrelAwareVersion等版本信息。

一、應(yīng)用打包步驟概覽

在基于Umi搭建的Electron App開發(fā)完成后，為了確保用戶可以順利下載和更新應(yīng)用，我們需要進(jìn)行一系列的打包操作。以下是打包步驟的簡要介紹：

步驟1： 使用NuGet工具生成Package文件。在命令行中輸入 `nuget pack Package.nuspec` 來生成NuGet包。

步驟2： 利用Squirrel工具創(chuàng)建安裝文件。通過執(zhí)行命令 `squirrel--releasify ..nupkg` 來生成安裝文件。

步驟3： 在生成了releases文件夾后，根據(jù)本文中關(guān)于創(chuàng)建安裝程序的部分，對setup.exe進(jìn)行自定義設(shè)置。

二、打包優(yōu)化前的挑戰(zhàn)分析

在基于Umi搭建Electron App的過程中，我們可能會面臨打包后dist包體積過大的問題。這不僅影響應(yīng)用的下載和更新體驗(yàn)，還可能增加用戶的安裝難度。經(jīng)過初步分析，我們發(fā)現(xiàn)主要問題在于安裝程序和asar文件體積過大。

三、打包優(yōu)化實(shí)踐

為了解決這個問題，我們可以采取以下措施進(jìn)行優(yōu)化：

措施1： 對比不同的打包方式。通過對比使用 `electron-builder--dir` 和直接使用 `electron-builder` 命令的打包結(jié)果，我們發(fā)現(xiàn)前者相較于后者體積顯著減小。這為我們提供了優(yōu)化的方向。

措施2： 分析打包文件目錄結(jié)構(gòu)。我們發(fā)現(xiàn).exe文件主要是加載resources/app.asar中的內(nèi)容，而asar文件則對源代碼進(jìn)行加密。對比簡單工程與復(fù)雜工程的打包結(jié)果，我們發(fā)現(xiàn)復(fù)雜工程的asar文件體積顯著增大。

措施3： 采用雙package.json結(jié)構(gòu)。為了進(jìn)一步優(yōu)化，我們可以將web應(yīng)用和electron的package.json分離。這需要我們新建app文件夾，移動main.js至app文件夾，并進(jìn)行相應(yīng)的配置調(diào)整。通過這種方式，我們可以避免重復(fù)打包dependencies，從而減小體積。

四、優(yōu)化成果展示

經(jīng)過上述優(yōu)化措施，我們?nèi)〉昧孙@著的成果：

.exe文件體積減少了13MB。

asar文件體積減少了167.27MB。

整體dist包大小減小了186MB。

這不僅提升了應(yīng)用的下載和更新體驗(yàn)，也為后續(xù)的開發(fā)提供了更優(yōu)化的基礎(chǔ)。

五、后續(xù)開發(fā)與優(yōu)化建議

為了保持高效的開發(fā)流程并持續(xù)優(yōu)化應(yīng)用性能，建議開發(fā)者們關(guān)注以下幾點(diǎn)：

持續(xù)關(guān)注electron-builder等工具的更新，及時引入新的優(yōu)化策略。

定期進(jìn)行代碼審查，避免不必要的冗余和重復(fù)代碼。

合理利用資源，避免在應(yīng)用中引入過多的第三方庫和插件。

參考相關(guān)文檔和倉庫地址，了解更多關(guān)于優(yōu)化Electron App構(gòu)建流程的最佳實(shí)踐。

通過不斷優(yōu)化和持續(xù)改進(jìn)，我們可以為用戶帶來更流暢、更輕便的應(yīng)用體驗(yàn)。