使用create-react-app 创建 Electron 桌面应用
如何创建一个最简单的electron桌面应用?
electron-quick-start
git clone https://github.com/electron/electron-quick-start.git
cd electron-quick-start
npm i
// 运行应用
npm start
这个时候就可以看到应用跑起来了。
react+electron
接下来使用create-react-app
创建 electron 项目。
npm i -g create-react-app
create-react-app electron-react
cd electron-react
安装electron 以及添加启动命令
npm i -S electron // 在package.json 中添加electron 启动命令 和 编译命令 "electron-start": "electron . --env dev", "electron-build": "npm run build && electron . --env build"
在react的最外层目录创建electron的主进程文件 main.js, 内容直接拷贝
electron-quick-start
仓库中的main.js在React项目中的package.json文件中增加main字段,值为”main.js”
在文件package.json中添加字段 “homepage”:”.”
还需要修改一下main.js 的内容,以便于对应 dev 和 build 状态下都能够两个命令就运行我们的electron 应用。
// 声明一个全局变量 // 获取命令中带的参数 const argv = process .argv .slice(2) // 对createWindow 函数中的内容进行修改 //判断是否是开发模式 if (argv && argv[1] == 'dev') { mainWindow.loadURL("http://localhost:3000/") } else if (argv && argv[1] == 'build') { // window 加载build好的html. mainWindow.loadURL(url.format({ pathname: path.join(__dirname, './build/index.html'), protocol: 'file:', slashes: true })) }
mainWindow.loadURL("http://localhost:3000/")
表示在开发模式下, electro