React + Electron + Webpack

Electron.js 有名的就是可以打造跨平台桌面應用程式(俗稱的桌面APP)。著名的Visual Studio Code, Slack等… 都是用 Electron 做的。

對於專精JS的人, 不用再學 .NET Core 也同樣能做出嚇嚇叫的桌面APP。熟悉的前端框架(ex: Vue.js , Angular, React..)或甚至單純的靜態html都能在桌面APP裡呈現。

桌面APP看似同樣渲染前端頁面與使用者互動。與瀏覽器的互動設計其實有一個蠻大的差別 : 就是桌面APP沒有"回到上一頁"這件事情! (關於這個issue 我們之後來繼續討論吧)

那要怎麼讓Webpack 可以串聯React 與 Electron 呢?

只要把Webpack 的入口接上 Electron，把Electron當成容器來裝內容物即可!

首先我們先在src內建立 main.tsx(.js/.ts) for Electron入口, render.tsx(.js/.ts) for React入口。

main 的內容可以參考 Electron 官方裡的 electron-quick-start。

render 的內容就是一般的 React index.js。

main.tsx (完整程式碼請見electron-quick-start)

同時在 src 裡建立一個 html 靜態檔讓 Electron 來啟動(上圖紅色框框)，這時index裡可以設定id給 React Component做渲染(如下圖)。

接下來在Webpack的參數設定檔裡，設定electron 和 react 進入點。

electron的順序要擺在react前面

main.js會先被製造出來，再製造出render.js

接著，設定package.json裡的script如下圖，webpack build完後，會產生main.sj 與 render.js ，index.html 已經綁定接上render.js做渲染(也就是我們的React App)， electron 啟動入口則用main.js 來開啟。

main 的入口設定為 dist/main.js

scripts start 啟動 dist/main.js即可

成功啟動如下~!! 開始動手建立你的桌面APP吧~!!

Electron 也可開啟Develope Tool Window喔