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
Oct 31 Javascript
jquery中对表单的基本操作代码
Jul 29 Javascript
jquery 学习之一 对象访问
Nov 23 Javascript
关于JavaScript中的关联数组分析
Apr 09 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
微信小程序实现循环动画效果
Jul 16 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
function.inc.php超越php
2006/12/09 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
JQuery用户名校验的具体实现
2016/03/18 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
python 数据的清理行为实例详解
2017/07/12 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
python实现矩阵打印
2019/03/02 Python
Python PO设计模式的具体使用
2019/08/16 Python
Python Django view 两种return的实现方式
2020/03/16 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
大专会计自我鉴定
2014/02/06 职场文书
事业单位鉴定材料
2014/05/25 职场文书
励志演讲稿800字
2014/08/21 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
祝酒词范文
2015/08/12 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python