[react开发electron笔记]-init

init react

yarn create react-app my-app

跑完了执行npm start, 发现react已经能跑起来了.

init electron

因为electron最后需要编辑, 仅安装在开发依赖中就可以.

yarn add -dev electron

根据electron官方文档启动粘贴下index.html和main.js, 在项目根目录下新建一个叫electron的文件夹, 丢进去.
package.json 根据官方文档新增内容

  "scripts": {
    "start-electron": "electron ."
  },
  "main": "electron/main.js" ;;此处注意main的路径多了一层我们新建的electron文件夹

同时别忘了修改electron/main.js的载入文件路径

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

此时跑

npm run start-electron

发现electron是能正常启动的

electron嵌入react

基础逻辑就是先启动react, 再启动electron,监听react窗口
启动了react之后, 修改electron/main.js里的loadFile为

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

再

npm run start-electron

发现react已经嵌入electron了.
新增wait-on和concurrently, 前后启动 react 和 electron
wait-on是等待callback再发出下一条指令,
concurrently是多条指令并列下达. 具体可以去npm看说明.

yarn add -dev wait-on concurrently

修改后的启动脚本为

  "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 ."
  },

那个BROWSER=none是为了默认浏览器不自动弹出localhost, 到此配置完成. npm直接start美滋滋

npm start