Electron 開發筆記 - 使用 @electron-forge/plugin-webpack

評估 electron 到底要跟哪套網頁開發的流程合在一起用，先研究一下 @electron-forge/plugin-webpack，粗略整合還堪用，但還有一些路徑或程式碼架構要處理。

先規劃了 src 目錄：

  % tree src 

  src

  ├── html

  │   └── mainRenderer

  │       ├── index.html

  │       └── index.js

  ├── main

  │   └── index.js

  ├── preload

  │   └── mainRenderer.js

  └── renderer

      ├── index.js

      └── mainRenederer.js

  

  5 directories, 6 files

其中 html 就是預期每個 renderer 的網頁所在地；而 main/index.js 就是 Electron main process 處理的項目；而 renderer/mainRenederer.js 是預期在 Electron main process 中處理 createWindow 的項目抽取出來重複使用；而 preload/mainRenderer.js 就是 Electron Renderer 展現前的 preload script

如此，想讓純前端網頁的程式碼都可以賴在 html 目錄下，屆時要靠常見工具封裝成 SPA 也方便。

而使用 electron-forge/plugin-webpack 上，只需要留意二件事：

1. 在 package.json 描述要被 webpack 封裝的項目

% cat package.json | jq '.config'

{

  "forge": {

    "plugins": [

      [

        "@electron-forge/plugin-webpack",

        {

          "mainConfig": "./webpack.main.config.js",

          "renderer": {

            "config": "./webpack.renderer.config.js",

            "entryPoints": [

              {

                "name": "main_window",

                "html": "./src/html/mainRenderer/index.html",

                "js": "./src/html/mainRenderer/index.js",

                "preload": {

                  "js": "./src/preload/mainRenderer.js"

                }

              }

            ]

          }

        }

      ]

    ]

  }

}

2. 在 Electron main process 中，使用 createWindow 後要讀取的 index.html 跟 preload.js 要改用變數

MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY, MAIN_WINDOW_WEBPACK_ENTRY

目前還會卡到 webpack dev server 運行時，有些 js code 執行異常，正考慮不要靠 webpack dev server，可能就要正式離開 @electron-forge/plugin-webpack" 用法了

更多資訊：github.com/changyy/study-node-electron-forge-with-plugin-webpack

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