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 相关文章推荐
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
node.js中 stream使用教程
Aug 28 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 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初学入门
2006/11/19 PHP
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
yii用户注册表单验证实例
2015/12/26 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
js注意img图片的onerror事件的分析
2011/01/01 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
详解基于webpack&gettext的前端多语言方案
2019/01/29 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
python将字母转化为数字实例方法
2019/10/04 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
战略合作协议书范本
2014/04/18 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
分享提高 Python 代码的可读性的技巧
2022/03/03 Python
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers