init react

yarn create react-app my-app

跑完了執(zhí)行npm start, 發(fā)現(xiàn)react已經(jīng)能跑起來了.

init electron

因?yàn)閑lectron最后需要編輯, 僅安裝在開發(fā)依賴中就可以.

yarn add -dev electron

根據(jù)electron官方文檔啟動(dòng)粘貼下index.html和main.js, 在項(xiàng)目根目錄下新建一個(gè)叫electron的文件夾, 丟進(jìn)去.
package.json 根據(jù)官方文檔新增內(nèi)容

  "scripts": {
    "start-electron": "electron ."
  },
  "main": "electron/main.js" ;;此處注意main的路徑多了一層我們新建的electron文件夾

同時(shí)別忘了修改electron/main.js的載入文件路徑

win.loadFile('electron/index.html')

此時(shí)跑

npm run start-electron

發(fā)現(xiàn)electron是能正常啟動(dòng)的

electron嵌入react

基礎(chǔ)邏輯就是先啟動(dòng)react, 再啟動(dòng)electron,監(jiān)聽react窗口
啟動(dòng)了react之后, 修改electron/main.js里的loadFile為

win.loadURL('http://localhost:3000')

再

npm run start-electron

發(fā)現(xiàn)react已經(jīng)嵌入electron了.
新增wait-on和concurrently, 前后啟動(dòng) react 和 electron
wait-on是等待callback再發(fā)出下一條指令,
concurrently是多條指令并列下達(dá). 具體可以去npm看說明.

yarn add -dev wait-on concurrently

修改后的啟動(dòng)腳本為

  "scripts": {
    "start": "concurrently \"npm run start-react\" \"wait-on http://localhost:3000 && npm run start-electron\"",
    "start-react": "BROWSER=none react-scripts start",
    "start-electron": "electron ."
  },

那個(gè)BROWSER=none是為了默認(rèn)瀏覽器不自動(dòng)彈出localhost, 到此配置完成. npm直接start美滋滋

npm start