使用create-react-app 创建 Electron 桌面应用

最新推荐文章于 2025-03-10 10:29:51 发布

stu_yiliang

最新推荐文章于 2025-03-10 10:29:51 发布

阅读量3.2w

点赞数 1

分类专栏：前端文章标签： electron react antd

本文链接：https://blog.csdn.net/greekmrzzj/article/details/80273765

版权

本文介绍如何结合create-react-app和Electron创建桌面应用。首先从electron-quick-start开始，然后介绍如何在React应用中引入antd，通过react-app-rewired实现按需加载。接着讲解electron build的打包过程，并解决Create-react-app与Electron中线程间通信的问题，确保Node.js模块在React中可用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用create-react-app 创建 Electron 桌面应用

如何创建一个最简单的electron桌面应用？

electron-quick-start

git clone https://github.com/electron/electron-quick-start.git
cd electron-quick-start
npm i
// 运行应用
npm start

这个时候就可以看到应用跑起来了。
这里写图片描述

react+electron

接下来使用create-react-app创建 electron 项目。

npm i -g create-react-app
create-react-app electron-react
cd electron-react

安装electron 以及添加启动命令

npm i -S electron

// 在package.json 中添加electron 启动命令 和 编译命令
"electron-start": "electron . --env dev",
"electron-build": "npm run build && electron . --env build"

在react的最外层目录创建electron的主进程文件 main.js，内容直接拷贝electron-quick-start仓库中的main.js
在React项目中的package.json文件中增加main字段，值为”main.js”
在文件package.json中添加字段 “homepage”:”.”

还需要修改一下main.js 的内容，以便于对应 dev 和 build 状态下都能够两个命令就运行我们的electron 应用。

// 声明一个全局变量
// 获取命令中带的参数
const argv = process
 .argv
 .slice(2)


// 对createWindow 函数中的内容进行修改
//判断是否是开发模式
 if (argv && argv[1] == 'dev') {
   mainWindow.loadURL("http://localhost:3000/")
 } else if (argv && argv[1] == 'build') {
   // window 加载build好的html.
   mainWindow.loadURL(url.format({
     pathname: path.join(__dirname, './build/index.html'),
     protocol: 'file:',
     slashes: true
   }))
 }