基于Umi搭建Electron App

一、開發(fā)環(huán)境準備與框架搭建

在開發(fā)Electron應用之前，我們需要先做好準備工作。這包括安裝Node環(huán)境及Npm工具，并建議使用nvm來管理多個版本的Node，以確保開發(fā)流程的順暢。針對搭建Umi+Antd+Electron這一特定框架，推薦使用經(jīng)過驗證的特定Node和Npm版本。

為了集成Ant Design作為UI庫，建議直接參考Ant Design Pro的搭建步驟。這相對于UmiJS來說，能節(jié)省大量集成的時間。對于Windows系統(tǒng)用戶，框架搭建過程中可能會遇到一些特定問題，需要找到相關(guān)文件并依步驟解決。

使用create-umi命令生成React項目時，需要仔細選擇配置選項，以確保項目按照預期的方式搭建。執(zhí)行命令時，要避免覆蓋已有文件，并確保正確配置。

二、Electron應用的核心配置

在基于Umi的Electron應用中，我們需要引入Electron依賴并編寫主進程文件main.js。這一過程需要嚴格按照Electron官網(wǎng)文檔的指引，使用正確的命令加載URL，并與Webpack的devServer配置保持一致。

在配置Electron主進程文件時，特別需要注意端口的使用，確保其與Webpack的配置相匹配。如果本地端口被占用，我們可以通過配置文件或環(huán)境變量來調(diào)整。

三、Electron應用的打包與構(gòu)建

當我們的應用開發(fā)完成后，就需要進行打包。這時，我們將使用electron-builder這一工具，并根據(jù)不同的操作系統(tǒng)進行相應的配置。打包配置中，我們需要設置一些關(guān)鍵參數(shù)，如appId、productName以及輸出目錄等。

在打包配置中，我們需要考慮對歷史路由模式、publicPath以及outputPath等參數(shù)的調(diào)整。還需要確保webpack的配置滿足Electron的打包需求。

四、生產(chǎn)環(huán)境與開發(fā)環(huán)境的差異處理

在Electron的主進程文件中，我們需要根據(jù)生產(chǎn)環(huán)境和開發(fā)環(huán)境的不同，分別處理加載渲染進程的方式。這樣可以避免打包后出現(xiàn)如白屏等問題。通過調(diào)整腳本命令，我們可以確保在不同環(huán)境下正確啟動Electron應用。

五、Electron應用的打包優(yōu)化策略

針對基于Umi搭建的Electron應用，其打包體積可能過大，影響用戶的下載或更新體驗。為此，我們需要深入優(yōu)化打包過程，以減小最終生成的文件大小。

我們需要分析使用webpack和electron-builder打包后的文件構(gòu)成，找出體積過大的主要原因。在一個簡單的工程中，我們可以通過對比electron-builder--dir和直接使用electron-builder命令的打包結(jié)果，發(fā)現(xiàn)安裝程序Setup.exe的體積占據(jù)很大一部分。對于集成Umi、Ant Design等復雜工程，asar文件的大小成為主要問題。

為了進一步優(yōu)化打包體積，我們可以考慮將web應用和electron的package.json分離，利用electron-builder支持的雙package.json結(jié)構(gòu)。還可以考慮調(diào)整資源壓縮方式、使用更高效的打包工具和技術(shù)等手段來減小打包體積。完成優(yōu)化后，我們可以將這一框架分享至Gitee，供社區(qū)成員學習和使用。

通過上述步驟，我們不僅可以成功搭建基于Umi的Electron應用，還可以針對其打包過程進行深入優(yōu)化，提升用戶體驗。優(yōu)化Electron應用：從文件夾結(jié)構(gòu)到打包流程的全方位改造

一、項目文件夾結(jié)構(gòu)的優(yōu)化

在開發(fā)Electron應用的過程中，合理的文件夾結(jié)構(gòu)對于項目的維護和擴展至關(guān)重要。本次優(yōu)化，我們首先進行文件夾結(jié)構(gòu)的調(diào)整。具體操作包括新建app文件夾，將main.js移至app文件夾中，并在app文件夾內(nèi)新建package.json文件。這樣的結(jié)構(gòu)更加清晰，便于開發(fā)者快速定位相關(guān)文件，提升開發(fā)效率。

二、避免重復打包的dependencies優(yōu)化

為了避免在打包過程中重復打包dependencies，我們對webpack的打包配置進行了調(diào)整。針對electron-builder的打包流程，我們也進行了一系列的優(yōu)化，以減少應用體積。通過這些優(yōu)化，基本Electron-Umi應用的.exe文件體積減少了13MB，asar文件體積減少了167.27MB，整體dist包大小減小了186MB。這不僅提高了應用的下載和更新體驗，也為后續(xù)的開發(fā)提供了更優(yōu)化的基礎。

三、快速創(chuàng)建Electron項目

本文旨在指導你快速搭建和定制Electron應用。作為Electron+Vue3開發(fā)系列的第一篇，你將學會如何快速創(chuàng)建Electron項目。通過執(zhí)行`pnpm create@quick-start/electron`命令，即可快速構(gòu)建一個基礎項目。啟動后，你將看到一個預覽的electron應用界面。

四、技術(shù)選型與項目改造

在技術(shù)選型上，我們選擇Electron作為開發(fā)桌面應用的解決方案。對于項目的改造，首先從`renderer`目錄開始。這里主要包含Vue3代碼。我們可以對`App.vue`進行清理和改造，實現(xiàn)所需要的功能。你的代碼改動將實時反映在主窗口上，看到效果即時調(diào)整，加快開發(fā)進程。

五、配置調(diào)整

除了界面修改，我們還可以根據(jù)需求調(diào)整應用窗口的配置。例如，我們可以通過修改`renderer/index.html`中的相關(guān)配置來更改應用窗口的標題。還可以根據(jù)開發(fā)需要，調(diào)整其他相關(guān)配置，以達到更好的用戶體驗和性能優(yōu)化。

通過以上的優(yōu)化和改造，我們不僅提升了Electron應用的開發(fā)效率，還使得應用體積更小，下載和更新體驗更佳。這對于開發(fā)者來說，無疑是一個重大的利好。這也為后續(xù)的開發(fā)奠定了更優(yōu)化的基礎，使得后續(xù)的開發(fā)工作更加順暢。

對于想要深入學習Electron開發(fā)的開發(fā)者，本文只是一個起點。在后續(xù)的學習中，還需要不斷探索和實踐，以更好地掌握Electron開發(fā)的技巧和方法。

注：具體代碼和配置可以參考相關(guān)文檔和倉庫地址，以實現(xiàn)更高效和優(yōu)化的Electron App構(gòu)建流程。