React Electron
- 一種是自己重新基於 create-react-app腳手架弄一個，可能對於前端開發者而言這種更加熟悉一點。
- 一種是使用github上的現成模板
這裏着重第一種說明下，第二種在github上有現成的工程模板clone下來直接運行即可。最後也會看一下第二種
創建 react 工程
使用 create-react-app腳手架創建 react 工程
npx create-react-app my-app
安裝 electron
本地項目安裝electron 依賴
npm i electron --save
修改工程
修改package.json文件
-
在package.json 中添加 homepage和main字段
"main": "main.js", "homepage": ".",main字段對應的main.js 是需要添加的electron 主進程的文件
homepage 原因是默認情況下，homepage是http://localhost:3000，build後，所有資源文件路徑都是/static，而Electron調用的入口是file:協議，/static就會定位到根目錄去，所以找不到靜態文件。在package.json文件中添加homepage字段並設置爲"."後，靜態文件的路徑就變成了相對路徑，就可以正確地找到了。 -
添加script腳本命令
"electron-dev": "electron . dev", "electron": "electron .",這裏一個是使用electron運行開發時候的腳本加了 dev的參數，後面會根據傳入的這個參數，在主進程中做一層判斷
如果是開發環境的話，那麼主進程loadURL就會加載 http://localhost:3000/地址
如果是打包之後的環境就會加載打包文件夾的地址（這裏打包是放在build文件夾下，所以會加載’./build/index.html’地址）
添加main.js文件
需要在工程目錄下添加main.js文件，即electron的主進程文件，這裏可以直接從github上的quick-start項目下直接copy過來做修改，地址是(https://github.com/electron/electron-quick-start)。
裏面做的事情，就是新建一個窗體應用，在electron應用啓動之後根據(開發/生產)環境去加載頁面。
主要的修改如下：
// 引入node的 path 和url模塊
const path = require('path')
const url = require('url');
// 獲取在 package.json 中的命令腳本傳入的參數，來判斷是開發還是生產環境
const mode = process.argv[2];
在createWindow函數中，創建了主窗體之後根據參數去加載不同的url到electron中：
//判斷是否是開發模式
if(mode === 'dev') {
mainWindow.loadURL("http://localhost:3000/")
} else {
mainWindow.loadURL(url.format({
pathname:path.join(__dirname, './build/index.html'),
protocol:'file:',
slashes:true
}))
}
當然如果這裏開發環境下啓動的不是3000端口，那這裏也需要對應修改一下
添加 preload.js 文件
也是將quick-start工程中直接將這個文件copy過來即可
結合UI 框架
在這裏其實就當做和正常的web應用開發一樣，只不過這裏使用了electron包裝了一層，使得瀏覽器被包裝進了electron中。正常web開發中怎麼使用antd，這裏也是一樣使用。這裏簡單用 antd 演示一下
使用 npm i antd --save，然後在需要的地方引入對應的ui控件即可
熱模塊更新
到這裏之後基本就將electron 和 react 框架結合在一起了，下面
- 打開一個終端命令行輸入 npm run start 啓動react。(默認是在 http://localhost:3000/)
- 再打開一個命令行輸入 npm run electron-dev 啓動electron應用，這時候electron應用就會加載 http://localhost:3000/ 並且在代碼中修改也會熱更新到electron應用中的主窗體
- 如果react打包之後，可以運行 npm run electron 這個時候electron 加載的就是 build/index.html文件
開發模式下熱模塊跟新效果如下:
可以看到在代碼中做的修改可以實時的熱更新到electron 應用中去。
如果react打包之後，可以使用 npm run electron來加載react打包之後的應用。效果如下：
electron-react-boilerplate
這個是已近配置好的一個工程模板，可以基於此模板來使用。需要注意的是使用這個模板node版本需要>10
地址：https://github.com/electron-react-boilerplate/electron-react-boilerplate
clone下來之後運行會看到頁面配置了一個簡單的路由和一個計數器
效果如下:
