1 使用cra 创建 项目
npx create-react-app center-tools
2 安装依赖
yarn add electron electron-builder cross-env wait-on concurrently --dev
yarn add electron-log
使用了electron-builder 作为打包,会因为网络原因下不下来 对应版本的electron ,所以要啊package.json 里面加上 淘宝源
"electronDownload": {
"mirror": "https://npm.taobao.org/mirrors/electron/"
},
3 创建electron.js
在public 文件夹下创建 electron.js
const {app, BrowserWindow} = require('electron');
const log = require('electron-log');
const {spawn} = require('child_process');
const path = require('path');
const isDev = require('electron-is-dev');
// Optional, initialize the logger for any renderer processses
log.initialize({preload: true});
log.transports.file.fileName = 'my-electron-log.log';
log.info('isDev :',isDev)
log.info(`execPath is ${process.execPath}`);
log.info('process.resourcesPath is ' + process.resourcesPath)
// 记录不同级别的日志
log.info('__dirname is ' + __dirname);
// 启动进程
const exePath = isDev? path.join(__dirname, 'ws-monitor.exe'): path.join(process.resourcesPath, 'ws-monitor.exe');
log.info(`Starting exe process: ${exePath}`);
const child = spawn(exePath);
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 800,
minWidth: 800,
minHeight: 800
});
log.info('Loading URL: http://localhost:3000/')
win.loadURL('http://localhost:3000/');
}
// 在应用程序准备就绪时创建窗口
app.whenReady().then(() => {
createWindow();
});
// 在所有窗口都关闭时退出应用程序
app.on('window-all-closed', () => {
child.kill();
if (process.platform !== 'darwin') {
app.quit();
}
});
// 在应用程序激活时创建窗口(仅适用于 macOS)
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
在这个代码里面 记录了日志 ,并且启动时会附带启动一个ws-monitor.exe
ws-monitor.exe 也在public 文件夹内,为了能打包的时候打包进 electron 里面 ,需要
在package.json 里面加上 如下配置 (根配置)
"build": {
"appId": "com.example.electron-cra",
"files": [
"build/**/*",
"node_modules/**/*"
],
"extraResources": [
{
"from": "public/ws-monitor.exe", // 这里是ws-monitor.exe
"to": "."
}
],
"directories": {
"buildResources": "assets"
},
"nsis": {
"oneClick": true,
"perMachine": true,
"allowElevation": true,
"createDesktopShortcut": true,
"createStartMenuShortcut": true
}
}
这样打包后的ws-monitor.exe 就在 electron 执行程序的 同级文件夹 resources 里面
同时在 scripts 里面加上 electron 的命令
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron-start": "electron .", // 开发 electron 命令
"package": "yarn build && electron-builder" // 打包electron 命令
}
然后直接打包就可以啦