electron脫離編譯環境

❶ Electron技術框架是個天坑，說說軟體復雜性

Electron技術框架，看似吸引人的客戶端開發選擇，實則隱藏著巨大的軟體復雜性挑戰。官網electronjs.org揭示了這一框架的特性，但實際應用中，它的問題層出不窮。

首先，Electron的體積大，源於其內置了完整的瀏覽器環境，版本更新意味著更大的包體。不同的打包工具如Electron-builder與electron-forge在尺寸上就有顯著差異，如electron-forge可能產出1.7G的包，令人頭疼。

真正棘手的是它帶來的軟體交互復雜性。許多人試圖將React等前端框架融入Electron，以為能錦上添花。然而，前端工具鏈和Electron環境的不兼容，使得配置變得繁瑣，需要解決諸如環境切換、入口程序定義等矛盾。

React和Electron的執行環境不同，需要區分在Node與瀏覽器環境下的配置差異。React通常通過WebPack打包，但對Electron環境不友好，需要額外配置。更進一步，如使用TypeScript，配置復雜性將大幅增加，對初學者來說可能並不友好。

盡管有預設的Electron + React模板，但基礎工程框架仍然復雜，需要根據需求選擇。調試和打包過程中，網路問題、版本兼容性、組件載入問題等都可能成為絆腳石。

最終，軟體系統的復雜性不僅源於業務需求的多樣性和演算法的復雜性，還在於各種工具和環境之間的交互。工具鏈的增長，如Node、瀏覽器、npm、編譯器和打包工具，以及UI框架體系，都增加了系統的復雜程度，使得正確配置變得困難。

總結來說，Electron技術框架並非易如反掌的簡單選擇。其內部的復雜技術細節、與其他工具的交互以及操作系統間的差異，都需要開發者深入理解和處理，因此，簡單地認為「只是用瀏覽器和頁面寫程序」是遠遠不夠的。每一步擴展都可能帶來新的挑戰和問題。

❷ 開發Electron，不小心接觸到C++，經過一周多的時間終於摸索出

研究開發Electron過程中，發現程序在Windows環境下運行無誤，但在Linux和macOS系統中遇到問題，主要源於依賴的第三方插件只提供exe程序。為了解決這一問題，開始探索如何使用C++等源碼編譯出適用於Windows、Linux、macOS的二進制應用程序。

經過一周的學習與實踐，終於掌握如何編譯Linux和Windows應用程序，但尚未精通在單一系統環境下編譯出Windows、Linux、macOS兼容的程序。當前主要涉及交叉編譯技術，正深入研究以期獲得完整流程，以便後續發布相關教程。

開始准備工具，包括Windows 10操作系統、CMake、Visual Studio 2019等。學習過程分為幾個步驟：下載並解壓libpng-1.6.35源碼，查看依賴zlib的版本信息，下載zlib-1.2.8源碼，編譯生成debug和release版本的靜態鏈接庫，並復制zlib-1.2.8/build/zconf.h文件到zlib-1.2.8目錄下。隨後，使用CMake編譯libpng-1.6.35，並生成適用於Windows和Linux的靜態鏈接庫。同樣，遵循上述流程完成mozjpeg-4.0.3的編譯。

對於使用MinGW編譯的疑問，通過CMake GUI選擇「MinGW Makefile」進行配置，等待配置完成並生成Makefile後，在命令行中執行相應的make命令。如果編譯出的exe文件無法單獨使用，需確保程序依賴的dll文件與exe文件放在同一目錄，或使用.xxx-static.exe的命名格式，確保程序正常運行。

❸ electron 編譯原生addon 踩坑記

我分享的是在使用 Electron 打包應用時，遇到的編譯原生addon的問題和解決策略。

開發過程中，我需要將 c++ 文件編譯為.node文件，以便被 Node.js 調用。但遇到了一個錯誤：模塊'medicare_hz.node'被編譯成不同的 Node.js 版本，需要重新編譯或重新安裝模塊。

原因在於 Electron 使用了不同的 V8 引擎版本，與 Node.js 的版本不一致。為了適配 Electron，需要使用 electron-rebuild包重建模塊。

嘗試後，問題並沒有解決。在不斷嘗試和失敗後，我找到了解決方法。首先，確保本地編譯環境正常，然後使用 Electron 環境編譯 c++ 原生模塊。前置環境依賴包括安裝 node-gyp 和 windows-build-tools（如果是32位系統）。

這個經歷讓我認識到，面對編譯問題時，理解基本原理和查閱官方文檔至關重要。解決問題的思路也很重要。同時，不斷學習和實踐是提高解決問題能力的關鍵。

項目列表如下：

1. NiceFish-React：基於 React 18.0.0 的前端項目，使用 Antd、Inversify、定製版 Bootstrap 開發。

2. NiceFish：演示前後端分離開發模式的項目，包含前端瀏覽器、移動端、Electron 環境的開發。

3. OpenWMS-Frontend：管理後台系統實踐項目。

希望分享的經驗能夠幫助到有需要的朋友，共同進步。

❹ 桌面端Electron基礎配置

機緣巧合之下獲取到一個桌面端開發的任務。為了最快的上手速度，最低的開發成本，選擇了electron。

Electron是一個使用 JavaScript、HTML 和 CSS 構建桌面應用程序的框架。嵌入 Chromium 和 Node.js 到 二進制的 Electron 允許您保持一個 JavaScript 代碼代碼庫並創建跨平台應用在Windows、macOS和Linux上運行，不需要本地開發經驗。

electron主要由一個主進程和一個或多個渲染進程組成，方便的腳手架項目有 electron-vite。electron-vite分為3層結構創建項目。項目創建完成啟動之後，會在目錄中生成一個out目錄。out目錄中會生成項目文件代碼，在electron-vite中使用ESmodel來載入文件，啟動的時候會被全部打包到out目錄中合並在一起。所以一些使用CommonJs的node代碼復制進來需要做些修改。npm安裝的依賴依然可以使用CommonJs的方式引入。

在electron-vite中，node的加入非常簡單。在主進程中，可以配置nodeIntegration: true。preload目錄下引入node代碼，留一個口子在min主進程中調用。

配置資料庫時，推薦使用sqlite3，這是本地應用的常用選擇。當然，也可以使用其他資料庫，使用方式與node中相同。需要注意的是C++代碼編譯的問題，可能會存在兼容性問題。如果一直嘗試還是報錯，嘗試換版本。electron-vite新版本問題不大，遇到過老版本一直編譯失敗的問題。

終端亂碼問題可以通過在win環境下添加 "dev:win": "chcp 65001 && electron-vite dev"來解決。

在Electron中實現多頁簽功能，可以在相關文章中找到詳細指導。

日誌維護是應用開發中很重要的一環。在主進程中，可以監聽應用的日誌。

實現應用更新功能，可以使用electron-updater，需要知道伺服器地址。在dev下測試更新功能時，可以在主進程main文件中添加相關代碼。

介面封裝方面，electron中可以像node一樣編寫介面，但更推薦使用IPC進行主進程和渲染進程之間的通信。在node中使用的是esmodel和一般的node項目寫法上還有些區別，需要適應。

在使用webContents方法時，前端（vue）可以監聽'receive-tcp'事件來獲取消息。TCP鏈接成功獲取到數據後，在data事件中，可以使用webContents方法主動傳遞消息給渲染進程。數據解析通常涉及十六進制或二進制數據格式，需要對數據進行處理，切割，緩存。使用 Buffer 對數據進行處理，根據數據長度進行切割，判斷數據完整性。

桌面端開發時，數據交互方式可能不局限於http，也可能涉及WebSocket（WS），TCP等其他通信協議。使用node中的Tcp模塊，net進行TCP連接，獲取數據後使用webContents方法主動傳遞消息給渲染進程。數據包解析和切割通常根據外部系統協商的數據格式進行。

完成所有開發任務，打完收工。