Electron打包React生成桌面应用方法详解

Electron打包React生成桌面应用方法详解

Electron 可以让你使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。如果你正在使用 React 开发应用程序，并且想要将其转换为桌面应用程序，那么 Electron 是一个很好的选择。

下面是使用 Electron 打包 React 的步骤：

步骤 1：初始化 React 应用程序

首先，你需要使用 create-react-app 初始化 React 应用程序。创建一个新的项目，使用以下命令：

npx create-react-app my-electron-app

步骤 2：安装 Electron

使用以下命令安装 Electron：

npm install --save-dev electron

步骤 3：添加 Electron 启动脚本

在项目的根目录下创建一个名为 main.js 的文件，内容如下：

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadURL('http://localhost:3000');
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

这个脚本将创建一个 Electron 窗口并打开 React 应用程序的主页。

步骤 4：修改 React 应用程序的启动脚本

在 package.json 文件中的 scripts 选项中，将 start 命令修改为以下命令：

"start": "react-scripts start & electron ."

这个命令将同时启动 React 应用程序和 Electron 应用程序。

步骤 5：打包 Electron 应用程序

使用以下命令打包 Electron 应用程序：

npm run electron-pack

在项目的根目录下创建一个名为 electron-packager.js 的文件，内容如下：

const packager = require('electron-packager');
const path = require('path');

packager({
  dir: path.join(__dirname, '.'),
  out: path.join(__dirname, '..', 'dist'),   // 将打包好的应用程序放到 dist 目录下
  name: 'MyElectronApp',
  platform: 'win32',   // 打包为 Windows 应用程序
  arch: 'x64',
  icon: path.join(__dirname, 'icon.ico'),   // 应用程序图标
  overwrite: true,
  appVersion: '1.0.0',
  win32metadata: {
    CompanyName: 'MyCompany',
    ProductName: 'MyElectronApp',
    FileDescription: 'My Electron App',
    OriginalFilename: 'MyElectronApp.exe',
  }
})
.then(appPaths => {
  console.log(`Packaged app saved to ${appPaths}`)
})
.catch(err => {
  console.error(err)
})

运行此脚本将会打包你的应用程序，生成一个 MyElectronApp.exe 文件，可以在 Windows 上运行。

示例 1：添加自定义菜单

以下是如何添加自定义菜单到 Electron 应用程序的示例代码：

const template = [
  {
    label: 'File',
    submenu: [
      {
        label: 'Open',
        accelerator: 'CmdOrCtrl+O',   // 快捷键
        click(items, win) {   // 单击事件
          // 打开文件对话框
        }
      },
      {
        label: 'Save',
        accelerator: 'CmdOrCtrl+S',
        click(items, win) {
          // 保存文件
        }
      }
    ]
  },
  {
    label: 'Edit',
    submenu: [
      {
        label: 'Undo',
        accelerator: 'CmdOrCtrl+Z',
        role: 'undo'
      },
      {
        label: 'Redo',
        accelerator: 'Shift+CmdOrCtrl+Z',
        role: 'redo'
      },
      { type: 'separator' },
      {
        label: 'Cut',
        accelerator: 'CmdOrCtrl+X',
        role: 'cut'
      },
      {
        label: 'Copy',
        accelerator: 'CmdOrCtrl+C',
        role: 'copy'
      },
      {
        label: 'Paste',
        accelerator: 'CmdOrCtrl+V',
        role: 'paste'
      },
      {
        label: 'Select All',
        accelerator: 'CmdOrCtrl+A',
        role: 'selectall'
      },
    ]
  }
];

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

上面的代码将添加一个名为 File 和一个名为 Edit 的菜单。在 File 菜单中，我们添加了一个名为 Open 的子菜单，并将快捷键设置为 CmdOrCtrl+O。在单击 Open 菜单项时，将会显示一个文件对话框，用于选择要打开的文件。在 Edit 菜单中，我们添加了几个命令，例如 Undo、Redo、Cut、Copy 等等。

示例 2：使用 IPC 通信

以下是如何在 Electron 应用程序中使用 IPC 通信的示例代码：

在 Electron 应用程序的主进程中，添加以下代码：

const {ipcMain} = require('electron');

ipcMain.on('message', (event, arg) => {
  console.log(arg);
  // 发送消息到渲染进程
  event.sender.send('reply', 'This is a reply from main process');
});

在 React 应用程序的渲染进程中，添加以下代码：

const {ipcRenderer} = window.require('electron');

ipcRenderer.send('message', 'This is a message from renderer process');

ipcRenderer.on('reply', (event, arg) => {
  console.log(arg);
});

上面的代码将打印出从主进程发送过来的消息和回复。

总结

使用 Electron 打包 React 应用程序是一个相对简单的过程。只需要遵循上述步骤，就可以生成一个可以在桌面上运行的应用程序。此外，你还可以使用示例代码来自定义 Electron 应用程序。