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

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

使用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
  1. 安装electron 以及添加启动命令

    npm i -S electron
    
    // 在package.json 中添加electron 启动命令 和 编译命令
    "electron-start": "electron . --env dev",
    "electron-build": "npm run build && electron . --env build"
  2. 在react的最外层目录创建electron的主进程文件 main.js, 内容直接拷贝electron-quick-start仓库中的main.js

  3. 在React项目中的package.json文件中增加main字段,值为”main.js”

  4. 在文件package.json中添加字段 “homepage”:”.”

  5. 还需要修改一下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
       }))
     }

    mainWindow.loadURL("http://localhost:3000/") 表示在开发模式下, electro

好的,下面是基于 ReactElectron使用 electron-builder 进行打包的教程: 1. 创建 React 应用 首先,我们需要使用 create-react-app 工具创建一个 React 应用。在命令行中运行以下命令: ``` npx create-react-app my-electron-app ``` 这会在当前目录下创建一个名为 `my-electron-app` 的新应用。 2. 添加 Electron 接下来,我们需要在项目中添加 Electron。我们可以使用 `electron` 和 `electron-builder` 库来实现这一点。 在命令行中运行以下命令: ``` cd my-electron-app npm install --save-dev electron electron-builder ``` 3. 添加 Electron 入口文件 我们需要创建一个新文件 `public/electron.js`,这是 Electron 的入口文件。在这个文件中,我们需要引入 `electron` 模块并创建一个新的 Electron 窗口。 ```js const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadURL('http://localhost:3000') } app.whenReady().then(() => { createWindow() app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) ``` 这个文件创建了一个新的 Electron 窗口,并在窗口中加载了 React 应用的 `http://localhost:3000` 页面。 4. 修改 package.json 文件 我们需要修改 `package.json` 文件中的一些字段,以便 electron-builder 能够正确地打包我们的应用。 ```json { "name": "my-electron-app", "version": "0.1.0", "homepage": "./", "main": "public/electron.js", "build": { "appId": "com.example.my-electron-app", "productName": "My Electron App", "directories": { "output": "build" }, "files": [ "build/**/*", "node_modules/**/*", "public/**/*" ], "mac": { "category": "public.app-category.developer-tools", "icon": "public/icon.icns" }, "win": { "icon": "public/icon.ico" } } } ``` 这个文件中的 `main` 字段告诉 electron-builder 我们的 Electron 入口文件在 `public/electron.js`。`build` 字段中的其他字段指定了打包的一些设置,例如应用的 ID、名称、输出目录、文件列表和图标。 5. 添加打包脚本 最后,我们需要在 `package.json` 文件中添加一个打包脚本。 ```json { "scripts": { "start": "react-scripts start", "build": "react-scripts build", "pack": "electron-builder --dir", "dist": "electron-builder" } } ``` 这些脚本中的 `pack` 脚本会在开发模式下打包应用程序,而 `dist` 脚本会在生产模式下打包应用程序。 6. 运行应用 现在,我们可以运行应用程序。在命令行中运行以下命令: ``` npm start ``` 这将启动 React 应用程序。 然后,在另一个命令行窗口中运行以下命令: ``` npm run pack ``` 这将使用 `electron-builder` 打包应用程序,并在输出目录中生成一个可执行文件。 如果您想要构建一个安装程序,您可以运行以下命令: ``` npm run dist ``` 这将打包应用程序,并在输出目录中生成一个安装程序。 这就是使用 ReactElectron使用 electron-builder 进行打包的教程。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值