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搭建环境内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库！
-
本文向大家介绍详解Webpack+Babel+React开发环境的搭建的方法步骤，包括了详解Webpack+Babel+React开发环境的搭建的方法步骤的使用技巧和注意事项，需要的朋友参考一下 1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具，能够把各种文件（例如：ReactJS、Babel、Coffeescript、Less/Sass等）作为
-
本文向大家介绍Angular2从搭建环境到开发步骤详解，包括了Angular2从搭建环境到开发步骤详解的使用技巧和注意事项，需要的朋友参考一下 Angular-CLI 说到 cli 大家不陌生，每出一个框架都会有对应的 cli ，俗称脚手架。angular2 本身提供了起步项目 angular2-quickstart，我尝试了一下，发现不是很好用，其它的大部分扩展需要自行安装，之后看了一下 ang
-
本文向大家介绍Windows下搭建python开发环境详细步骤，包括了Windows下搭建python开发环境详细步骤的使用技巧和注意事项，需要的朋友参考一下 本文为大家分享了Windows下搭建python开发环境详细步骤，供大家参考，具体内容如下 1.搭建Java环境 （1）直接从官网下载相应版本的JDK或者JRE并点击安装就可以 （2）JDK与JRE的区别： 1）JDK就是Java Deve
-
本文向大家介绍搭建Tomcat 8源码开发环境的步骤详解，包括了搭建Tomcat 8源码开发环境的步骤详解的使用技巧和注意事项，需要的朋友参考一下 前言 最近在网上搜索了很多关于tomcat源码环境搭建的文章，发现按照文章的步骤，几乎都启动不了，于是自己尝试搭建，下面是搭建的方法。 基础环境搭建 1、下载tomcat源代码，我这里是通过svn的方式下载的，svn下载地址 2.下载安装maven工具
-
本文向大家介绍PHP环境搭建的详细步骤，包括了PHP环境搭建的详细步骤的使用技巧和注意事项，需要的朋友参考一下 接着上篇继续学习，谈谈IIS支持php怎么配置： 1、去php官网下载php：http://windows.php.net/download/ 。IIS7我们需要选择php 5.3 以上的VC9包，下载zip文件。如图： 2、将 zip 包解压缩到自己选择的目录，例如 C:\PHP\。解
-
本文向大家介绍python搭建虚拟环境的步骤详解，包括了python搭建虚拟环境的步骤详解的使用技巧和注意事项，需要的朋友参考一下 前言 相信对于python开发人员来说，机器上有不同的python版本是很正常的，因为开发的项目有的用2.6或2.7，有的就要用3.0+版本，如何把这些不同的版本管理好，保持每个环境的干净和独立，方便不同版本之间的切换，这时候就要用到我们的虚拟环境了，所以今天我们就来