electron+react开发和部署

创建react项目

npx create-react-app my-app
cd my-app
npm start

然后在浏览器访问 http://localhost:3000

在react项目中创建electron

npm install --save-dev electron

在脚本里添加启动命令"electron-start": "electron ."

在React项目的根目录（不是src目录）创建Electron的启动文件main.js

//main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')

let win
function createWindow() {
    // 创建浏览器窗口。
    win = new BrowserWindow({ width: 800, height: 600 ,
        webPreferences:{
        nodeIntegration: true,
        },
        show:false//默认不显示
    })
    
    //开发时，使用网址方便调试
    //win.loadURL('http://localhost:3000')
    //打包React后，直接加载打包文件
    win.loadURL(url.format({
        pathname: path.join(__dirname, './build/index.html'),
        protocol: 'file:',
        slashes: true
      }))
    
    win.on("ready-to-show",function(){
        win.show()//加载完成之后显示
    })
    
    // 打开开发者工具
    // win.webContents.openDevTools()
  
    // 当 window 被关闭，这个事件会被触发。
    win.on('closed', () => {
        // 取消引用 window 对象，如果你的应用支持多窗口的话，
        // 通常会把多个 window 对象存放在一个数组里面，
        // 与此同时，你应该删除相应的元素。
        win = null
    })
}
app.commandLine.appendSwitch('wm-window-animations-disabled')
// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
    // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    // 在macOS上，当单击dock图标并且没有其他窗口打开时，
    // 通常在应用程序中重新创建一个窗口。
    if (win === null) {
        createWindow()
    }
})

// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。

在React项目中的package.json文件中增加main字段，值为"main.js"

//package.json
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "electron": "^17.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "main": "main.js",
  "homepage": ".",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron-start": "electron .",
    "package": "electron-packager E:\\Resources\\Projects\\react\\my-app my-app --win32-x64 --out E:\\Resources\\Projects\\react\\my-app\\out --electron-version 17.1.2"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "electron-packager": "^15.4.0"
  }
}

整理打包

1. 打包react

npm run build

2. 整理文件到另一个文件夹，防止打包出的文件太大。

cp -r build new-dir/build && cp main.js new-dir/main.js
cd new-dir

3. 重新安装electron环境和打包工具

npm install --save-dev electron
npm install --save-dev electron-packager

//package.json
{
  "name": "my-app-pack",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "homepage": ".",
  "scripts": {
    "package": "electron-packager E:\\Resources\\Projects\\react\\my-app-pack my-app-pack --win32 --out E:\\Resources\\Projects\\react\\my-app-pack\\out --electron-version 17.1.2"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^17.1.2",
    "electron-packager": "^15.4.0"
  },
  "dependencies": {
  }
}

npm run package

打包到E:\\Resources\\Projects\\react\\my-app-pack\\out下了，平台是win32.