Electron 開發筆記 - 初探 ElectronJS 框架開發 PC app

約莫一年前團隊同事接了個用 ElectronJS 開發的程式，並且依照其框架成果再做出另一個 PC app ，最近播點時間來研究一下 ElectronJS 。幾個月前接觸 Golang 時，也曾想過用 Golang + Electron 練習一下 PC app ，只是整體上運作起來還是太卡了點。

整體上，要認識 ElectronJS 建議都先看一次官方文件 www.electronjs.org/docs/latest/ ，基本上寫的精簡不錯，看完一輪 Processes in Electron 就會學會：

• Electron 的流程架構 (Process Model)，可以分成 main process (node.js / main.js) 和 renderer process (BrowserWindow / renderer.js )，並且透過 preload.js 串起 main process 跟 renderer process 溝通橋樑
• preload.js 是在 renderer process 執行前運行的，等於進入到 renderer process 前，可以打造一些溝通環境
• 資安領域上，如何讓 renderer process 的權限不要太大 (Context Isolation)
• 關於 main process 和 renderer process 溝通時，該怎樣進行 (ipcMain, ipcRenderer)，可以分成 Renderer to Main 單向溝通、Renderer to Main 雙向溝通、Main to Renderer 溝通等
• 看一眼 Process Sandboxing 情況，再多了解一下 MessagePorts 用法 (像 window.postMessage 之 iframe 溝通）

如此，就差不多可以來用 Electron 開發 PC app，然而有更多眉眉角角躲在 package.json 中以及一堆神秘的指令，如 electron-forge 等等。

我想，開發 Electron 的複雜度，源自於整個專案進行會跨非常多領域(指令)吧，每個混再一起就會覺得爆炸大，每個分離看待就會舒適許多。

像我自己也弄了：

• env_nvm.sh：靠 nvm 切換 node.js 版本
• env_vim.sh：靠 .vimrc 和 .vimrc_coc.nvim 完成簡易 coding style 和 auto-complete 設置
• 把上述包裝在 init_env.sh 運行，每次開發就先跑一下 source init_env.sh 就行了

最後，對於 Electron PC app 開發，後續也都還會再做一些程式碼封裝方式(webpack等)和程式碼混淆等，當然，若還有開發框架 vue.js, react 等，也都還有對應的任務，所以連續動作還是很多的，之後繼續筆記一下。

其他：github.com/changyy/study-node-electron-simple