折腾React和Electron
安装和配置
直接使用create-react-app
创建初始的react app, 然后安装electrion相关包
1 | create-react-app app |
在根目录下创建public
文件夹,然后新建electron.js
文件到public
文件夹,添加下面代码
1 | const electron = require('electron'); |
上面的代码electron用于创建窗口,mainWindow.webContents.openDevTools();
用于打开开发者工具。
之后在package.json
中添加"main": "public/electron.js"
,并在"scripts"
下添加新命令:
1 | "electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"" |
然后在命令行输入yarn run electrion-dev
即可看到create-react-app
里一模一样的页面,用浏览器访问http://localhost:3000也能看到这个页面。
打包
这里使用electron-builder
来打包发布,更细节配置需要查看它的文档。
首先在package.json
中添加新属性:
1 | "build": { |
然后在"scripts"
下添加新命令:
1 | "electron-pack": "build -c.extraMetadata.main=build/electron.js" |
这里参考里面给出的是老的命令,现在不支持了,应该改为上面这种。
再添加一个新命令:
1 | "pre-pack": "yarn build" |
这里用于将react app构建到build文件下,为之后electron打包作铺垫。然后在package.json
中添加"homepage": "./"
最后,执行:
1 | yarn run pre-pack |
即可在dist
目录下看到安装包、可执行文件等
错误解决
运行yarn run electron-pack
会出现下面的错误
1 | Error: Unresolved node modules: typescript |
对于electron-builder
版本18.7.0以下,需要在package.json
中添加"author"
参考
Unknown argument:em
From React to an Electron app ready for production
- 本文链接:https://dowob.cn/2019/02/20/%E6%8A%98%E8%85%BEreact%E5%92%8Celectron/
- 版权声明:本站所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 CN 许可协议。转载请注明出处!