[Electron]初始化React+Electron项目工程

需要使用到的软件

• node

1.创建React项目

npx create-react-app riot-live-client-data-api-panel

2.为React项目安装核心依赖Electron

npm install electron --save-dev

3.初始化项目

3.1 为项目安装开发依赖

npm install ${package} --save-dev

• 开发项 electron-is-dev（判断当前环境是否为开发环境） nodemon（用于监听electron程序修改后自动重启） * nodemon --watch ${file} --exec \"${command}\"
• 启动项 concurrently 启动输出混乱 跨平台启动命令 electron和react关闭调试时react未被kill问题 concurrently "command" "command" wait-on 处理react启动完毕后再启动electron wait-on http://127.0.0.1:3000 && electron . cross-env 统一不同平台的环境变量设置 * cross-env BROWSER=none npm start

3.2 初始化main.js文件

const { app,BrowserWindow } = require('electron');
let mainWindow;
app.on('ready',() => {
	mainWindow = new BrowserWindow({
	height: 860,
	width: 640,
	webPreferences: {
	nodeIntegration:true
	},
	backgroundColor: '#efefef'
	});
 	mainWindow.loadURL("http://localhost:3000/");
	mainWindow.on('closed', () => {
		app.quit();
	});
});

3.3 将main.js配置到package.json

{
	"main": "main.js"
}

3.4 配置启动命令

{
	"scripts": {
		...
		"dev": "concurrently \"cross-env BROWSER=none npm start\" \"wait-on http://127.0.0.1:3000 && electron .\""
	}
}

3.5 配置热加载监听

方便electron开发调试

{
	"scripts": {
		...
		"electron-reload": "nodemon --watch main.js --watch src/class/* --watch src/menuTemplate.js --exec \"electron .\""
	}
}

4.运行

$ npm run dev