electron react 简单demo -526互联

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 命令
  }

然后直接打包就可以啦