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


Posted in Javascript onJune 07, 2020

简介

用于构建用户界面的 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加载不到,需要手动刷新

完善

安装依赖

同时执行多个命令https://www.npmjs.com/package/concurrently

cnpm install concurrently --save-dev

等待资源加载完成https://www.npmjs.com/package/wait-on

cnpm install wait-on --save-dev

环境变量https://www.npmjs.com/package/cross-env

cnpm install cross-env --save-dev

完善后的json

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

"dev": "concurrently \" wait-on http://localhost:3000 && electron . \" \" cross-env BROWSER=none npm start \" "

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

总结

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

Javascript 相关文章推荐
jquery图片上下tab切换效果
Mar 18 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
Java中Timer的用法详解
Oct 21 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
Webpack打包字体font-awesome的方法示例
Apr 26 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue路由权限校验功能的实现代码
Jun 07 #Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 #Javascript
JS原型对象操作实例分析
Jun 06 #Javascript
JS中的继承操作实例总结
Jun 06 #Javascript
ES6 async、await的基本使用方法示例
Jun 06 #Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 #Javascript
ES6 Generator基本使用方法示例
Jun 06 #Javascript
You might like
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python下MySQLdb用法实例分析
2015/06/08 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
详解python内置模块urllib
2020/09/09 Python
python switch 实现多分支选择功能
2020/12/21 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
中秋节活动总结
2014/08/29 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL
Go语言grpc和protobuf
2022/04/13 Golang
Golang gRPC HTTP协议转换示例
2022/06/16 Golang