React + Electron 搭建Windows桌面应用

Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.

1、Windows开发环境准备

开发: Node>=8, Npm>=5, Python>=2
安装: vc code, git(https://git-scm.com/download), yarn

2、React项目结合Electron

添加 electron包

yarn add electron

Tip: 报错: Command name was not available. Please run again.

则需要给electron添加淘宝镜像
vs code的setting.json中添加

"terminal.integrated.env.windows": {
  "ELECTRON_CUSTOM_DIR": "8.2.5", // 版本目录
  "ELECTRON_MIRROR": "https://npm.taobao.org/mirrors/electron/" //淘宝镜像
}

配置 package.json

{
  "main": "electron/main.js", // electron启动文件路径
  "scripts": {
    "electron": "electron .", // 添加启动脚本
  }
}

配置 electron/main.js

const { app, BrowserWindow } = require("electron");

// 保持window对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.
let mainWindow;

function createWindow() {
  // 创建浏览器窗口
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true,
    },
  });
  
  mainWindow.loadURL("http://localhost:3000/");

  // 打开开发者工具
  mainWindow.webContents.openDevTools();

  // 关闭window时触发下列事件.
  mainWindow.on("closed", function () {
    mainWindow = null;
  });
}

// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow);

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

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

启动 Electron

yarn start
yarn electron

3、Electron-builder打包

添加electron-builder打包工具

yarn add electron-builder

跨平台设置环境变量cross-env

yarn add cross-env

修改入口文件 electron/main.js

/**为你的应用加载index.html
 * loadURL 分为两种情况
 *  1.开发环境，指向 react 的开发环境地址
 *  2.生产环境，指向 react build 后的 index.html
 */
const startUrl =
  process.env.NODE_ENV === "development"
    ? "http://localhost:3000/"
    : url.format({
        pathname: path.join(__dirname, "../build/index.html"),
        protocol: "file:",
        slashes: true,
      });
mainWindow.loadURL(startUrl);

修改 package.json

{
  "homepage": ".", // electron静态文件相对路径
  // 需要把electron和electron-builder放到devDependencies里
  "devDependencies": {
    "electron": "8.2.5",
    "electron-builder": "^22.7.0"
  },
  "scripts": {
    "electron": "cross-env NODE_ENV=development electron .", // 添加dev启动脚本
    "electron-pack": "react-scripts build && electron-builder", // 添加electron打包脚本
  }
  "build": {
    "appId": "com.xxx.xxx",
    "productName": "react-electron",
    "directories": {
      "output": "build-electron", // 打包输出目录
      "buildResources": "public"
    },
    "files": [ // 可访问到的文件路径
      "./build/**/*",
      "./electron/main.js",
      "./package.json"
    ],
    "win": {
      "icon": "src/asset/icon.ico"
    }
  },
}

最后打包即可
yarn electron-pack