Electron结合React,在渲染进程中使用 node 模块

问题

create-react-appelectron集成在了一个项目中。但是在React中无法使用electron。当在React中使用require('electron')时就会报TypeError: fs.existsSync is not a function的错误。因为React中无法使用Node.js的模块.

解决方法1

利用window.require引入

const electron = window.require('electron')

解决方法2

  1. 创建preload.js文件

在项目目录下新建preload.js文件,该文件是预加载的js文件,并且在该文件内可以使用所有的Node.jsAPI。在preload.js中添加

global.electron = require('electron')
  1. 修改main.js文件

修改创建浏览器的入口代码,添加preload配置项。将preload.js作为预加载文件

const mainWindow = new BrowserWindow({
width: 800,
height: 600,
// frame: false,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration : true,
           contextIsolation: false  //Electron 12.0以上版本需要的额外设置此项
}
})

或者修改piblic/index.html文件

<div id="root"></div>前引入preload.js文件

<script>require('./preload.js')</script><div id="root"></div>

最后在React组件中如下使用electron

const electron = window.electron;

Electron结合React,在渲染进程中使用 node 模块的更多相关文章

  1. 【旧文章搬运】再谈隐藏进程中的DLL模块

    原文发表于百度空间,2009-09-17========================================================================== 相当老的话 ...

  2. react 服务器端渲染 ssr 中 localstorage/history/window is not defined 解决方案

    1.原因 ssr 会在后端执行组件的 componentWillMount 以及在它这个生命周期之前的生命周期 也就是说 ssr 阶段是不会执行 componentDidMount 方法的 当你在 c ...

  3. React应用程序设计过程中如何区分模块到底是state还是props?

    根据官方文档,满足以下任意条件的模块,就不是State,原文如下: 1.Is it passed in from a parent via props? If so, it probably isn’ ...

  4. 17-7-20-electron中主进程和渲染进程区别与通信

    老规矩,先吐槽,再记录. 今天被上司教育了将近一个小时.因为之前自动更新的模块,我认为已经完成了,但是还有一些细节没有完善好,就一直一直的被教育~ 事情全部做完,提交以后关闭issue! electr ...

  5. 使用electron进行原生应用的打包(2)---主进程与渲染进程之间的通信

    上一篇讲了使用electron进行打包的配置相关文件,这篇主要讲electron中很重要的通信方式. 首先解释一个概念: electron打包的应用包含两个部分 electron的环境(node),也 ...

  6. 研究Electron主进程、渲染进程、webview之间的通讯

    背景 由于某个Electron应用,需要主进程.渲染进程.webview之间能够互相通讯. 不过因为Electron仅提供了主进程与渲染进程的通讯,没有渲染进程之间或渲染进程与webview之间通讯的 ...

  7. Electron结合React和TypeScript进行开发

    目录 结合React+TypeScript进行Electron开发 1. electron基本简介 为什么选择electron? 2. 快速上手 2.1 安装React(template为ts) 2. ...

  8. 渲染优化中那些奇奇怪怪的rules

    禁⽌使⽤ iframe iframe 会阻塞主⻚⾯的 Onload 事件 搜索引擎的检索程序⽆法解读这种⻚⾯,不利于 SEO iframe 和主⻚⾯共享连接池,⽽浏览器对相同域的连接有限制,所以会影响 ...

  9. electron 主进程,和渲染进程的通信

    ipcMain https://electronjs.org/docs/api/ipc-main 当在主进程中使用时,它处理从渲染器进程(网页)发送出来的异步和同步信息, 当然也有可能从主进程向渲染进 ...

随机推荐

  1. windows 10玩mysql 8

    注意事项: 1)windows 10只支持两个版本: 5.7,8.0 2)安装有两种方式,zip与installer,建议用zip方式,因为installer要安装许多依赖,如vision c++等, ...

  2. mybatis多条件多值批量更新

    mysql并没有提供直接的方法来实现批量更新,但是可以用点小技巧来实现. 这里使用了case when 这个小技巧来实现批量更新. 举个例子: UPDATE 表名 SET    display_ord ...

  3. MyBatis的缓存玩法

    重要概念 SqlSession:代表和数据库的一次会话,提供了操作数据库的方法. MappedStatement:代表要发往数据执行的命令,可以理解为SQL的抽象表示. Executor:和数据库交互 ...

  4. Java秘诀!Java赋值运算符介绍

    运算符丰富是 Java 语言的主要特点之一,它提供的运算符数量之多,在高级语言中是少见的. Java 语言中的运算符除了具有优先级之外,还有结合性的特点.当一个表达式中出现多种运算符时,执行的先后顺序 ...

  5. Java秘诀!零基础怎样快速学习Java?

    对于零基础想学Java的朋友,其实一开始最应该做的就是定好学习目标和端正学习态度,切记不要三天打鱼两天晒网! 首先你是零基础,现在急需把Java学好,在保证学习质量的同时,用最短的时间学好Java应该 ...

  6. FastAPI 学习之路(十五)响应状态码

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  7. Spring框架访问数据库的两种方式的小案例

    1.1 以Xml的方式访问数据库的案例 要以xml的方式访问数据库需要用到JdbcTemplate ,因为 JdbcTemplate(jdbc的模板对象)在Spring 中提供了一个可以操作数据库的对 ...

  8. Spring启动过程源码分析基本概念

    Spring启动过程源码分析基本概念 本文是通过AnnotationConfigApplicationContext读取配置类来一步一步去了解Spring的启动过程. 在看源码之前,我们要知道某些类的 ...

  9. Endian

    Endian 寻址 多字节对象被存储为连续的字节序列,对象的地址为所使用字节中最小的地址. 例如,假设一个类型为 int 的变量 a 的地址为 0x100,也就是说,地址表达式 &a 的值为 ...

  10. 4.14——208. 实现 Trie (前缀树)

    前缀树(字典树)是经典的数据结构,以下图所示: 本来处理每个节点的子节点集合需要用到set,但是因为输入规定了只有26个小写字母,可以直接用一个[26]的数组来存储. 关于ASCII代码: Java ...