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

 更新时间:2020年06月07日 10:20:00   作者:归子莫  
这篇文章主要介绍了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搭建环境内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解react内联样式使用webpack将px转rem

    详解react内联样式使用webpack将px转rem

    这篇文章主要介绍了详解react内联样式使用webpack将px转rem,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 实现React单页应用的方法详解

    实现React单页应用的方法详解

    今天我们来学习React是如何构建起一个单页应用的,React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM、JSX等。下面一起来看看。
    2016-08-08
  • 利用React Router4实现的服务端直出渲染(SSR)

    利用React Router4实现的服务端直出渲染(SSR)

    这篇文章主要介绍了利用React Router4实现的服务端直出渲染(SSR),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • React中上传图片到七牛的示例代码

    React中上传图片到七牛的示例代码

    本篇文章主要介绍了React中上传图片到七牛的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • React中useRef的具体使用

    React中useRef的具体使用

    这篇文章主要介绍了React中useRef的具体使用,它可以用来获取组件实例对象或者是DOM对象,除此之外还有哪些用法,就一起来了解一下
    2021-04-04
  • React Native模块之Permissions权限申请的实例相机

    React Native模块之Permissions权限申请的实例相机

    这篇文章主要介绍了React Native模块之Permissions权限申请的实例相机的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-09-09
  • 浅谈webpack+react多页面开发终极架构

    浅谈webpack+react多页面开发终极架构

    这篇文章主要介绍了浅谈webpack+react多页面开发终极架构,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • react-native使用leanclound消息推送的方法

    react-native使用leanclound消息推送的方法

    这篇文章主要介绍了react-native使用leanclound消息推送的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Parcel 打包示例(React HelloWorld)

    Parcel 打包示例(React HelloWorld)

    本篇文章主要介绍了Parcel 打包示例(React HelloWorld),详细的介绍了Parcel打包的特点和使用示例,有兴趣的可以了解一下
    2018-01-01
  • React 源码中的依赖注入方法

    React 源码中的依赖注入方法

    这篇文章主要介绍了React 源码中的依赖注入方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论