React+Electron快速创建并打包成桌面应用的实例代码

我将在以下内容中详细讲解 “React+Electron快速创建并打包成桌面应用的实例代码”的完整攻略。

简介

React 和 Electron 分别是前端和桌面开发中常用的工具。React 是一个基于 JavaScript 的图形 UI 库，它可以高效地构建 Web 应用程序的用户界面。Electron 是一个基于 Chromium 和 Node.js 实现的桌面应用开发框架，它可以让开发者使用 Web 技术（HTML、CSS 和 JavaScript）创建跨平台的桌面应用程序。

本攻略将介绍如何使用 React 和 Electron 来快速创建并打包成桌面应用的实例代码。

步骤一：创建 React 应用程序

第一步是创建 React 应用程序。我们可以使用 create-react-app 工具来快速创建基于 React 的应用程序。

1. 打开终端并输入以下命令：

npx create-react-app react-electron-demo

这将创建一个名为 react-electron-demo 的新项目。npx 是 Node.js 包执行器，且 create-react-app 是 React 应用程序创建工具，它将自动创建基于 React 的应用程序。安装过程可能需要一些时间。

1. 运行以下命令来启动应用程序：

cd react-electron-demo
npm start

1. 现在可以在浏览器中查看您的应用程序。应用程序将在 http://localhost:3000/ 或另一个可用的端口上运行。

步骤二：安装并配置 Electron

现在在 React 应用程序上工作了。下一步是将其转换为桌面应用程序。我们需要先在 React 应用程序中安装 Electron。

1. 在终端中输入以下命令进行安装：

npm install --save-dev electron
npm install --save-dev electron-builder

1. 然后，添加一个新的 electron.js 文件， 用于配置并运行 Electron 应用程序。

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

let mainWindow

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
        },
    })
    const startUrl =
        process.env.ELECTRON_START_URL ||
        url.format({
            pathname: path.join(__dirname, '/../build/index.html'),
            protocol: 'file:',
            slashes: true,
        })
    mainWindow.loadURL(startUrl)
    mainWindow.on('closed', () => {
        mainWindow = null
    })
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow()
    }
})

在此处，我们定义和设置了主窗口的大小、WebPreferences 和打开的 URL。创建窗口后，我们在浏览器窗口中加载应用程序。

1. 在 package.json 文件中添加以下代码：

"scripts": {
    "electron": "electron ."
},
"build": {
    "appId": "com.example.myapp",
    "productName": "MyApp",
    "asarUnpack": ["public"],
    "directories": {
        "output": "release-builds"
    },
    "files": [
        "build/**/*",
        "node_modules/**/*",
        "package.json",
        "public/electron.js"
    ],
    "win": {
        "icon": "public/favicon.ico"
    },
    "publish": {
        "provider": "github"
    }
}

这里添加了一个新的 electron 脚本来运行应用程序。build 块用于指定应用程序的构建方式和配置。

1. 最后，运行以下命令来启动 Electron 应用程序：

npm run electron

这应该启动 Electron 应用程序并打开一个新的窗口，显示 React 应用程序。

步骤三：构建和打包应用

在这一步，我们将构建并打包应用程序以便将其分发给用户。

1. 运行以下命令构建应用程序：

npm run build

这将为我们的应用程序创建生产环境的构建文件。生成的文件将以静态文件的形式放在 build/ 文件夹中。

1. 运行以下命令打包应用程序：

npm run electron-builder

这会创建一个名为 release-builds 的文件夹，其中包含打包好的应用程序。

示例说明

示例一

这是一个示例：React + Electron To Do List。

该项目演示了如何使用 React 和 Electron 来创建一个基于「待办事项清单」的桌面应用程序。

示例二

这是另一个示例：Electron-React-Boilerplate。

该项目是一个 Electron 和 React 的基本应用程序，作为更大项目和应用程序的起始点。

结语

以上即为关于使用 React 和 Electron 快速创建并打包成桌面应用的完整攻略。在此后续的开发中，您可能会遇到更多问题。但是，我相信通过这个基本的指南，您会准备好开发您自己的基于 Electron 的桌面应用程序。