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 相关文章推荐
JavaScript 题型问答有答案参考
Feb 17 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
input框中的name和id的区别
Nov 16 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
js字符串倒序的实例代码
Nov 30 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
小程序关于请求同步的总结
May 05 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 Javascript
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
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
PHP如何将XML转成数组
2016/04/04 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
Javascript中的相等与不等运算
2010/04/25 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
python实现合并两个排序的链表
2019/03/03 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
python map比for循环快在哪
2020/09/21 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
英语专业推荐信
2013/11/16 职场文书
委托协议书范本
2014/04/22 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS