使用 Electron 在 5 分钟内创建一个桌面的 React 应用

原文链接 Create a Desktop React App in Under 5 Minutes with Electron - 作者 Mendoza

当我们使用 React 来构建应用的时候，有时创建一个在桌面被使用的界面更加有意义，特别是它不需要连接到网络上时。我遇到过着这种场景 - 当我想创建一个应用来管理本地文件的时候。我使用 Python 中的 Tkinter，但是，我觉得我可以通过 React 来构建运行更加快速，更加好看的与界面。这也是我开始学习 Electron 的契机。

Electron 是 GitHub 创造出来的，为了构建它们自己的 Atom 文本编辑器，而现在，已经在流行的软件，比如 VSCode 和 Discord 中使用。通过将 React 和 Electron 整合使用，就能够快速地开发跨平台的桌面应用。Electron 提供了特定于桌面的额外功能，比如系统级别的应用通知和托盘图标，但是，在本教程中，我将会介绍如何运行 React 的 Electron 应用的基础知识。

首先，我们需要创建一个新的 React 应用。我个人喜欢使用 Vite 来创建，这也是我本教程中使用到的脚手架工具，但是，我们使用 create-react-app 异曲同工。我也将使用 Typescript 来配置我的 Vite 应用。

bash 复制代码

npm create vite@latest <electron-app-name>

然后，进入新创建的应用所在的目录，然后安装 Electron 依赖。

bash 复制代码

npm install electron --save-dev

接着，我们可以在项目的根目录下创建一个名为 electron.ts 的文件，然后在文件中添加下面的代码：

typescript 复制代码

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

function createWindow() {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true
    }
  });
  
  // 加载 React 应用程序
  win.loadURL("http://localhost:5173");
  
  // 打开调试面板
  win.webContents.openDevTools();
}

// 当应用已经准备好了，创建窗口
app.whenReady().then(createWindow);

// 当所有的窗口到被关闭了，退出 Electron 应用
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
});

现在，我们需要更新根目录下的 package.json 文件。我们添加的内容到 script 脚本对象中：

json 复制代码

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

然后，我们需要给 Electron 应用一个入口，所以，我们添加一个 main 属性到文件中，值为 electron.ts文件，表明是它就是入口点:

json 复制代码

"main": "electron.ts",

最后的 package.json 文件如下所示：

json 复制代码

{
  "name": "electron-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "electron.ts",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "start": "react-scripts start",
    "electron": "electron ."
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@type/node": "^18.15.11",
    "@type/react": "^18.0.28",
    "@type/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "electron": "^23.2.1",
    "typescript": "^4.9.3",
    "vite": "^4.2.0"
  }
}

现在，通过运行下面的命令行来开启我们的 React 应用。npm run dev 将会开启 React 前端界面，然后 npm run electron 将会开启 Electron 应用并打开在 electron.ts 文件中预设的地址 http://localhost:5173 ：

bash 复制代码

npm run dev
npm run electron

Electron app running on desktop

现在，我们可以用 React 开发我们自己的跨平台桌面应用程序。你可以通过 here 来获取本教程的源代码。我最近专注于使用 React 构建更好的用户界面，你可以到我的 GitHub 中查看。

感谢阅读！