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中delete操作符不能删除的对象
Dec 03 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
Openlayers实现测量功能
Sep 25 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伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
js选项卡的实现方法
2015/02/09 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
详解python中index()、find()方法
2019/08/29 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
试述DBMS的主要功能
2016/11/13 面试题
Java程序员面试题
2013/07/15 面试题
单位在职证明范本
2014/01/09 职场文书
批评与自我批评总结
2014/10/17 职场文书
高中班主任评语
2014/12/30 职场文书
保卫工作个人总结
2015/03/03 职场文书
自我检讨书怎么写
2015/05/07 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js
python scrapy简单模拟登录的代码分析
2021/07/21 Python