使用 React.js 构建 Electron.js 应用程序-CFANZ编程社区

本教程介绍如何使用 React.js 开发和构建 Electron.js 应用程序

尽管 Electron.js 网站提到它与 React.js 兼容，但没有关于如何实现这一点的明确指南。网上找了一些教程，但是好像有点臃肿。他们将 Electron.js 源代码与 React.js 源代码混合在一起，我想将它们分开。

Electron.js 是如何工作的？那么，Electron 应用程序如何工作？它实际上是一个 Node.js 进程生成一个窗口，该窗口实际上是一个 Chromium 浏览器：

使用 React.js 构建 Electron.js 应用程序_应用程序

React.js 是如何工作的？在构建 React.js 应用程序时，它包含一个用于热重载的开发服务器。完成后，您可以“编译”您的 React.js 应用程序以用于生产。它输出静态index.html文件及其资产（javascripts、css、图像）。

连接 Electron.js 和 React.js

有了以上知识，连接 2 似乎相当容易。我们需要确保 Electron.js 在我们开发时加载 React.js 开发服务器，并在我们将应用程序打包成可执行文件时捆绑已编译的 React.js 应用程序。

让我们从创建 2 个文件夹开始：

Electron.js 应用程序：/electron-app
React.js 应用程序：/react-app

./ 
├── react-app 
└── electron-app

要设置 Electron.js 应用程序，请遵循他们的官方教程：https: //www.electronjs.org/docs/latest/tutorial/tutorial-prerequisites将应用程序打包成可执行文件。

接下来，使用https://reactjs.org/docs/create-a-new-react-app.html上的引导脚本设置 React.js 应用程序

现在让我们连接两个项目。

开发环境

首先，我们将设置开发环境。npm start首先通过从文件夹运行来启动您的 React.js 应用程序/react-app。它应该在端口 3000 启动一个开发服务器并启动你的默认浏览器指向http://localhost:3000

在 Electron 应用程序中，您需要main.js指向该开发服务器而不是它自己的静态index.html文件。我们可以简单地通过替换来做到这一点

mainWindow.loadFile('index.html')

改成

mainWindow.loadURL('http://localhost:3000');

在文件中/electron-app/main.js。

npm start通过从/electron-app文件夹运行来启动你的 Electron 应用程序。如果一切顺利，您应该会看到默认的 React.js 应用程序：

使用 React.js 构建 Electron.js 应用程序_静态文件_02

您可以按照指示进行操作并编辑您的页面/react-app/src/App.js，并在 Electron 窗口中观看页面刷新！

生产环境

当您准备好构建应用程序并将其打包为可执行文件时，您会希望/electron-app/main.js指向index.html由 React.js 生成的静态文件。

构建 React.js 应用注意：我们希望 React.js 使用相对路径而不是绝对路径（Electron.js 不喜欢那样），因此将以下内容添加到您的/react-app/package.json文件中：

"homepage": "./",

/react-app现在从文件夹构建 React.js 应用程序：

npm run build

这将生成一个/react-app/build包含静态文件index.html以及其他静态文件（如 css、javascript 和图像）的文件夹。

构建 Electron.js 应用程序现在是时候恢复我们之前对/eletron-app/main.js. 注释掉并替换为对以下内容的引用：mainWindow.loadURL(‘http://localhost:3000')index.html

mainWindow.loadFile('index.html'); //prod
//mainWindow.loadURL('http://localhost:3000'); //dev

事实上，您可以使用以下代码自动执行此操作：

if(app.isPackaged) {
  mainWindow.loadFile('index.html'); // prod
}else{
  mainWindow.loadURL('http://localhost:3000'); // dev
}

如果您一直遵循官方 Electron.js 教程，您的项目应该配置为由 Electron Forge 打包。

我们需要告诉 Electron Forge 包含 Reactindex.html和其他静态文件。您可以通过在/electron-app/forge.config.js文件中添加一个挂钩来完成此操作。像这样更新hooks部分：

const path = require('path');
const fs = require('fs');

module.exports = {
  packagerConfig: {},
  rebuildConfig: {},
  makers: [
    ...
  ],
  hooks: {
    packageAfterCopy: async (config, buildPath, electronVersion, platform, arch) => {
      var src = path.join(__dirname, '../react-app/build/');
      var dst = buildPath;
      fs.cpSync(src, dst, {recursive: true});
    }
  }
};