react 结合 electron创建桌面应用

矫情吗；* 2023-02-27 10:52 17阅读 0赞

#### node 12.15.0 ####

#### `npx create-react-app cloud-doc` ####

#### `npm install electron --save-dev` ####

#### `npm install electron-is-dev --save-dev` ####

根目录下新建一个 main.js 文件

const {  app, BrowserWindow } = require('electron')
    const isDev = require('electron-is-dev')
    let mainWindow;
    
    app.on('ready', () => { 
        mainWindow = new BrowserWindow({ 
            width: 1024,
            height: 680,
            webPreferences: { 
                nodeIntegration: true
            }
        })
        const urlLocation = isDev ? 'http://localhost:3000' : ''
        mainWindow.loadURL(urlLocation)
    })

###### package.json ######

"name": "cloud-doc",
    "version": "0.1.0",
    "main": "main.js",
    "private": true,

###### 配置package.json ######

#### `npm install concurrently --save-dev` ####

#### `npm install wait-on --save-dev` ####

#### `npm install cross-env --save-dev` ####

###### 添加命令 ######

"scripts": { 
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none npm start\""
      },

这样配置之后，启动 react 的同时，也会启动 electron，（`concurrently` 的作用），启动 electron 的时候，不会等待太久的白屏时间（ `wait-on` 的作用），同时在浏览器自动开启 react 的 tab 页 （`cross-env` 的作用）

这样的我们运行 `npm run dev` 的时候，就可以自动开启 electron 了。

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-cli3.0+electron创建桌面应用

创建项目之后，引入serialport失败报错信息： ![1716250-20190905112910388-1486732869.png][] 暂未找到解决方法。。。

分手后的思念是犯贱/ 2023年08月17日 17:30/ 0 赞/ 135 阅读

相关 Electron结合React使用

React Electron 1. 一种是自己重新基于 create-react-app脚手架弄一个，可能对于前端开发者而言这种更加熟悉一点。 2. 一种是使用git

Love The Way You Lie/ 2023年05月28日 12:44/ 0 赞/ 242 阅读

相关快速初始化一个electron+react桌面应用项目

Step1: 初始化一个react应用参考 [react官方文档][react] 这里要先要安装好create-react-app脚手架安装指令如下：

电玩女神/ 2023年03月01日 14:56/ 0 赞/ 85 阅读

相关 react 结合 electron创建桌面应用

node 12.15.0 `npx create-react-app cloud-doc` `npm install electron --save-dev`

矫情吗；*/ 2023年02月27日 10:52/ 0 赞/ 18 阅读

相关使用Electron 创建桌面应用

Electron是一个使用前端的技术来创建桌面应用的框架，打包后可以再MAC、windows和linux上直接运行。 1、安装安装的时候按照它官网的文档进行了

待我称王封你为后i/ 2023年01月22日 15:47/ 0 赞/ 140 阅读

相关使用Electron创建桌面Web程序

1.Electron 通过NPM进行本地安装，如果速度慢，可以在node安装目录中，修改.npmrc文件，使用[https://registry.npm.taobao.org/

太过爱你忘了你带给我的痛/ 2022年12月13日 04:25/ 0 赞/ 131 阅读

相关 electron实现桌面应用

1. 简介 [官网][Link 1] Electron是由GitHub开发，使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序

爱被打了一巴掌/ 2022年11月29日 13:10/ 0 赞/ 409 阅读

相关 Electron开发桌面应用

> 由 [Bazzzinga威][Bazzzinga] 同学翻译自 Medium。[https://medium.com/developers-writing/building

系统管理员/ 2022年04月25日 03:28/ 0 赞/ 357 阅读

相关 Electron-开发第一个桌面应用

Electron-开发第一个桌面应用 1.开始配置开始一个electron桌面应用的开发，首先需要配置好三个文件 + package.json

阳光穿透心脏的1/2处/ 2022年03月15日 14:24/ 0 赞/ 592 阅读

相关 Electron创建桌面应用程序Helloword

Electron创建桌面应用程序Helloword 推荐选择官方给的demo，非常方便。 github上拉取electron-quick-start 1. ...

小灰灰/ 2020年11月29日 15:25/ 0 赞/ 792 阅读