Electron开发环境搭建

1. 创建React项目

npx create-react-app note

2. 添加依赖

yarn add electron --dev // 必须是 dev
yarn add electron-is-dev // 开发环境判断
yarn add concurrently  --dev   // 同时运行多个命令
yarn add cross-env --dev   // 跨平台传递环境变量
yarn add wait-on --dev   // 多个命令串形运行
yarn add electron-builder --dev   // 打包

3. 添加主进程入口

在项目的根目录下添加主进程的入口文件 /public/main.js

const { app, BrowserWindow } = require("electron");
const isDev = require("electron-is-dev");
let mainWindow;

app.on("ready", () => {
  mainWindow = new BrowserWindow({
    width: 1024,
    height: 680,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  const url = isDev ? "http://localhost:3000" : `file://${path.join(__dirname, './index.html')}`;

  mainWindow.loadURL(url);
});

4. 修改配置文件

"dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none npm start\"",

5. 打包

package.json完整配置,其中build字段为最简配置

{
  "name": "note",
  "main": "public/electron.js",
  "author": "author",
  "description": "description",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1",
    "electron-is-dev": "^2.0.0"
  },
  "scripts": {
    "react-start": "react-scripts start",
    "react-build": "react-scripts build",
    "react-test": "react-scripts test --env=jsdom",
    "react-eject": "react-scripts eject",
    "electron-build": "electron-builder",
    "release": "yarn react-build && electron-builder --publish=always",
    "build": "yarn react-build && yarn electron-build",
    "start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\""
  },
  "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": {
    "concurrently": "^6.0.2",
    "cross-env": "^7.0.3",
    "electron-builder": "^22.10.5",
    "wait-on": "^5.3.0",
    "electron": "^12.0.6"
  },
  "homepage": "./",
  "build": {
    "appId": "com.example.electron-cra",
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
    "directories": {
      "buildResources": "assets"
    }
  }
}