Electron整合React使用搭建开发环境的步骤详解

简介

用于构建用户界面的 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文件中添加下面两行

首先运行npm start，然后再开启一个shell运行npm run dev

遇到的问题

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

"dev": "concurrently \" wait-on http://localhost:3000 && electron . \" \" cross-env BROWSER=none npm start \" "

配置完成之后直接在终端执行npm run dev，之后会弹出我们的界面

总结

到此这篇关于Electron整合React使用搭建开发环境的步骤详解的文章就介绍到这了,更多相关Electron整合React搭建环境内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Angular CLI + Electron 开发环境搭建

    本文介绍了Angular CLI + Electron 开发环境搭建,分享给大家 用 @angular/cli 配合 Electron 构建桌面软件开发环境,可以在 Electron 中使用 Angular 的各种特性,使开发桌面软件像开发网站一样简单.快捷,而且可以模块化,紧跟最新技术趋势. 安装 Angular CLI 和 Electron 首先使用 npm 安装 Angular Cli: $ npm i -g @angular/cli 然后安装 Electron $ npm i -g el

  • 详解使用webpack+electron+reactJs开发windows桌面应用

    electron是一两年前挺火的一个框架 本质上是一个浏览器,但是集成了很多windows系统的功能,让前端开发也可以直接操作windows的窗体,做成一个实打实的桌面软件 (当然听说mac上也可以用electron,不过没试过) (没错我还在用windows,不是mac也不是linux,我是个lowB) 团队主要的技术栈是react,所以考虑用react开发,方便维护. PS.由于项目是大半年前做的,所以一些细节可能记忆有误请见谅 几个重点: 1.想要能调试必须使用webpack打包,不能用r

  • 使用Electron构建React+Webpack桌面应用的方法

    使用Electron构建React+Webpack桌面应用的方法

    前言 Electron可以使用HTML.CSS.JavaScript构建跨平台桌面应用,可是在使用到React和Webpack时,会遇到一些配置问题,本文将针对React+Webpack下的Electron配置提供一个通用的解决方案. 环境配置 "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-transform-class-proper

  • Electron整合React使用搭建开发环境的步骤详解

    简介 用于构建用户界面的 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

  • IntelliJ IDEA基于SpringBoot如何搭建SSM开发环境的步骤详解

    之前给大家在博文中讲过如何通过eclipse快速搭建SSM开发环境,但相对而言还是有些麻烦的,今天玄武老师给大家介绍下如何使用IntelliJ IDEA基于SpringBoot来更快速地搭建SSM开发环境,相比于传统搭建方式,极少的配置文件和配置信息会让你彻底爱上它. 环境搭建步骤详解 第1步:创建Spring Initializr项目 在IntelliJ IDEA中新建项目,选择Spring Initializr,JDK版本选择自己安装的版本(首次使用可能显示没有,那么就点击New去按照步骤创

  • vscode C++开发环境配置步骤详解(教你如何用vscode编写写C++)

    用了一段时间的cb,Devc++,但一直感觉cb的高亮太差,而Devc++使用体验差(尤其是代码补全功能),换过vs2017,但是由于其太大了,卡顿十分明显,所以最终选择了vscode这款轻量级编译器.由于自己在配置c++开发环境时遇到了不少问题,因此特地写了这篇博文,希望能够帮助后来者快速实现c++环境配置. 步骤一:下载vscode 直接进入vscode官网下载即可,要注意选择与自己系统符合的版本. 官网地址:https://code.visualstudio.com/?wt.mc_id=D

  • 使用git迁移Laravel项目至新开发环境的步骤详解

    对于如何创建一个Laravel项目,相信对新接触Laravel的朋友并不存在太多的问题,但是今天我们要来看一下如何将已有的Laravel项目迁移(复制)到新的开发环境. 我们需要用到的工具是git,如果你不知道git是什么,这里有一个传送门,看完之后再回来: http://github.com 简单说来,git就是Github开发的VCS(Version Control System),即版本控制系统.如果你使用过SVN,那么你应该很清楚版本控制是什么. 本文的示例环境是Ubuntu 16.04

  • 在Mac OS下搭建LNMP开发环境的步骤详解

    一.概述 大家应该都知道LNMP代表的就是:Linux系统下Nginx+MySQL+PHP这种网站服务器架构.Linux是一类Unix计算机操作系统的统称,是目前最流行的免费操作系统.代表版本有:debian.centos.ubuntu.fedora.gentoo等.Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP代理服务器.Mysql是一个小型关系型数据库管理系统.PHP是一种在服务器端执行的嵌入HTML文档的脚本语言.这四种软件均为免费开源软件,组合到一

  • VSCode+PHPstudy配置PHP开发环境的步骤详解

    第一步:下载安装VSCode编辑器 第二步:下载安装PHPstudy集成环境 第三步:打开PHPstudy,选择界面左侧中的环境 第四步:点击右侧PHP运行环境下面的更多,选择适合的PHP版本 第五步:点击PHPstudy左侧环境,再点击右侧PHP选项中的设置,在弹出的界面中选择扩展组件,再点击XDebug调试组件,记住端口监听号是多少,最后点击确认 第六步:点击PHPstudy左侧的首页,点击WNMP红点切换适合的Web服务器,然后点击启动 第七步:打开VSCode编辑器,在欢迎使用界面中,找

  • 搭建Tomcat 8源码开发环境的步骤详解

    搭建Tomcat 8源码开发环境的步骤详解

    前言 最近在网上搜索了很多关于tomcat源码环境搭建的文章,发现按照文章的步骤,几乎都启动不了,于是自己尝试搭建,下面是搭建的方法. 基础环境搭建 1.下载tomcat源代码,我这里是通过svn的方式下载的,svn下载地址 2.下载安装maven工具,这里我就不多说了,安装说明太多了,自己网上找. 3.IDE,我这里使用idea 生成maven工程 我的代码本地目录是: /Users/helanzhou/Documents/helanzhou/java/Tomcat/tomcat8/tomca

  • CentOS 6.5中利用yum搭建LNMP环境的步骤详解

    CentOS 6.5中利用yum搭建LNMP环境的步骤详解

    前言 LNMP是Linux.Nginx.MySQL和PHP的缩写,这个组合是最常见的WEB服务器的运行环境之一.本文将带领大家在CentOS 6操作系统上搭建一套LNMP环境. 本教程适用于CentOS 6.5版本. 一.安装php7 1.更新yum源(默认yum源中php版本为5.3.3) # rpm -Uvh http://mirror.webtatic.com/yum/el6/latest.rpm 2.安装php7及常用的拓展模块 # yum -y install php70w php70

  • React Native 搭建开发环境的方法步骤

    React Native 搭建开发环境的方法步骤

    本文介绍了React Native 搭建开发环境,分享给大家,具体如下: 准备工作 node -v:确认是否安装Node,若已经成功安装了,则执行下面的命令:否则先进行Node的安装. npm install -g create-react-native-app:使用npm快速创建React Native应用. create-react-native-app AwesomeProject:创建名为AwesomeProject的项目. cd AwesomeProject:进入项目所在文件目录. y

  • 使用VScode搭建ROS开发环境的教程详解

    俗话说＂工欲善其事必先利其器＂,之前在Ubuntu上运行的ROS项目都是用vim或者gedit编写和修改代码,然后在终端编译运行,很不方便,函数跳转查看都没办法实现.所以今天我决定找一个方便的开发工具,也就是找一个像Windows上的VS那样的集成开发工具(IDE),ROS官网上有一个不同IDE的对比文章,网址在这里 我选择使用VScode．下载安装好VScode后,在扩展栏安装C/C++,CMake,CMake Tools,Code Runner,ROS(deprecated),Chinese

随机推荐