欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Electron整合React使用搭建开发环境的步骤详解

程序员文章站 2022-07-06 17:36:24
简介用于构建用户界面的 javascript 库步骤首先创建reactnpx create-react-app doc进入到doc项目cd doc安装electronnpm install elect...

简介

用于构建用户界面的 javascript 库

步骤

首先创建react

npx create-react-app doc

进入到doc项目

cd doc

安装electron

npm install electron --save-dev

安装依赖

判断是否为生产环境

cnpm 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' : 'dummyurl'
 mainwindow.loadurl(urllocation);
})

修改json配置文件

在json文件中添加下面两行

Electron整合React使用搭建开发环境的步骤详解

首先运行npm start,然后再开启一个shell运行npm run dev

Electron整合React使用搭建开发环境的步骤详解

遇到的问题

1、需要多次运行,十分的麻烦

2、每次会自动打开浏览器

3、react运行的速度慢,electron加载不到,需要手动刷新

完善

安装依赖

同时执行多个命令

cnpm install concurrently --save-dev

等待资源加载完成

cnpm install wait-on --save-dev

环境变量

cnpm install cross-env --save-dev

完善后的json

Electron整合React使用搭建开发环境的步骤详解

"dev": "concurrently \" wait-on && electron . \" \" cross-env browser=none npm start \" "

配置完成之后直接在终端执行npm run dev,之后会弹出我们的界面

总结

到此这篇关于electron整合react使用搭建开发环境的步骤详解的文章就介绍到这了,更多相关electron整合react搭建环境内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!