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方法主動傳遞消息給渲染進程。數據包解析和切割通常根據外部系統協商的數據格式進行。
完成所有開發任務,打完收工。