評估 electron 到底要跟哪套網頁開發的流程合在一起用，先研究一下 @electron-forge/plugin-webpack，粗略整合還堪用，但還有一些路徑或程式碼架構要處理。
先規劃了 src 目錄：
% tree srcsrc├── html│ └── mainRenderer│ ├── index.html│ └── index.js├── main│ └── index.js├── preload│ └── mainRenderer.js└── renderer├── index.js└── mainRenederer.js5 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" 用法了
沒有留言:
張貼留言