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 Xml增删改查(IE下)操作实现代码
Jan 30 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
js实现计时器秒表功能
Dec 16 Javascript
js实现div色块碰撞
Jan 16 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 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 循环列出目录内容的函数代码
2010/05/26 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
解释&&和||在javascript中的另类用法
2014/07/28 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
基于vue.js组件实现分页效果
2018/12/29 Javascript
js实现简易ATM功能
2020/10/27 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
Tornado 多进程实现分析详解
2018/01/12 Python
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
什么是索引指示器
2012/08/20 面试题
会计专业求职信
2014/08/10 职场文书
公司股东合作协议书
2014/09/14 职场文书
元旦标语大全
2014/10/09 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
演讲开场白台词大全
2015/05/29 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL
pytorch中的 .view()函数的用法介绍
2022/03/17 Python