Electron结合React开发环境遇到的问题
将create-react-app
与electron
集成在了一个项目中。但是在React中无法使用electron
当在React中使用require('electron')
时就会报TypeError: fs.existsSync is not a function
的错误。因为React中无法使用Node.js的模块.
解决方案如下
创建renderer.js
文件
在项目public/
目录下新建renderer.js
文件,该文件是预加载的js文件,并且在该文件内可以使用所有的Node.js的API。在renderer.js
中添加
global.electron = require('electron')
修改main.js
文件
修改创建浏览器的入口代码,添加preload
配置项。将renderer.js
作为预加载文件
mainWindow = new BrowserWindow({
width: 800,
height: 600,
autoHideMenuBar: true,
fullscreenable: false,
webPreferences: {
javascript: true,
plugins: true,
nodeIntegration: false, // 不集成 Nodejs
webSecurity: false,
preload: path.join(__dirname, './public/renderer.js') // 但预加载的 js 文件内仍可以使用 Nodejs 的 API
}
})
修改piblic/index.html
文件
在<div id="root"></div>
前引入renderer.js
文件
<script>require('./renderer.js')</script>
<div id="root"></div>
在React组件中如下使用electron
const electron = window.electron;
完成
Electron结合React开发环境遇到的问题的更多相关文章
- 使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...
- react学习笔记(一)用create-react-app构建 React 开发环境
React 可以高效.灵活的用来构建用户界面框架,react利用高效的算法最小化重绘DOM. create-react-app 是来自于 Facebook,通过该命令不需配置就能快速构建 React ...
- 【React】使用 create-react-app 快速构建 React 开发环境
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...
- Webpack笔记(二)——搭建React开发环境
前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...
- React开发环境配置
本文以上一篇文章继续配置:npm安装及环境配置<https://www.cnblogs.com/hzb462606/p/11565275.html> 使用 create-react-app ...
- React笔记01——React开发环境准备
1 React简介 2013年由Facebook推出,代码开源,函数式编程.目前使用人数最多的前端框架.健全的文档与完善的社区. 官网:reactjs.org 阅读文档:官网中的Docs React ...
- 搭建 webpack、react 开发环境(三)
配置 react-router-dom 我们开发一个 React 工程肯定不是一两个“页面”就可以满足需求的,所以我们需要一个在多个“页面”中跳转的功能,在使用 React 构建的单页面应用中,要 ...
- 搭建 webpack、react 开发环境(二)
配置处理样式文件 到目前为止,整个工程的配置已经差不多了,对于 React 更多相关的配置将在后面继续介绍,现在我们先来对目前的工程进行优化. 前面我们学习了搭建 webpack.react 开发 ...
- 搭建 webpack、react 开发环境(一)
基本介绍 Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,它可以将多种静态资源 JavaScript.css.le ...
随机推荐
- MySQL之SQL优化详解(一)
目录 慢查询日志 1. 慢查询日志开启 2. 慢查询日志设置与查看 3.日志分析工具mysqldumpslow 序言: 在我面试很多人的过程中,很多人谈到SQL优化都头头是道,建索引,explai ...
- [置顶]
Git学习总结(1)——Git使用详细教程
一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的电脑,所以 ...
- CSVHelper在Asp.Net MVC中的使用
1,从数据库读取数据,然后导出CSV文件 [HttpPost] public FileResult ExportCSV() { var apps =....//linq以及EF从数据库查询数据 Mem ...
- git 拉取远程分支 --本地分支不存在
git checkout -b 本地分支名 origin/远程分支名
- B - Oulipo
The French author Georges Perec (1936�C1982) once wrote a book, La disparition, without the letter ' ...
- Spring MVC-集成(Integration)-生成RSS源示例(转载实践)
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_rss_feed.htm 说明:示例基于Spring MVC 4.1.6. 以下示 ...
- jq 抽奖
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 【转】Maven的安装与使用(ubuntu)
原文: http://www.cnblogs.com/yunwuzhan/p/5900311.html https://maven.apache.org/guides/getting-started/ ...
- [Mini Program] 尺寸单位 rpx
So each phone's width is 750rpx. And according to the device ratio (width:height), we can calucalate ...
- 2014年辛星jquery解读第三节 Ajax
***************Ajax********************* 1.Ajax是Asynchronous Javascript And XML的简写,它指的是异步Javascript ...