Electron   发布时间:2019-10-11  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Electron和create-react-app构建应用的通信问题大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

这种环境下,使用官方的const {ipcRenderer} = require(‘electron’)时,由于处于react的环境下,会出现Uncaught TypeError: fs.existsSync is not a function这个报错。那我们来看下在这种环境下应该如何通信。

一、问题

由于我们会先使用Npm start一个react下的3000端口的服务器,所以使用require时已不是node的环境,出现了一个无方法的报错。

二、处理方法

到main.js中,在创建浏览器窗口时增加preload属性,让该js有能力在Node环境下运行,并将数据绑定到window上,给其他地方的数据使用,如下:

@H_746_12@mainWindow = newBrowserWindow({     width: 1000,     height: 600,     frame: false,     transparent: true,     webPreferences: {         javascript: true,         plugins: true,         nodeIntegration: false, // 不集成 Nodejs         webSecurity: false,         preload: path.join(__dirname, './public/renderer.js') // 但预加载的 js 文件内仍可以使用 Nodejs 的 API     } })

注:path需要额外require下。

根据preload中的路径,我们在public目录下新建一个rendeerer.js的问题,文件内容是:

global.electron = require('electron');

此次的数据绑定到全局后,其他js文件中也是可以访问的。global是node中顶层的全局变量,这儿将global改成window也是能生效的。

好了,到这的话,差不多大功告成了。

到对应使用了require(‘electron’)的地方,将他们改成window.electron就可以了。

注:直接访问http://127.0.0.1:3000/会有个undefined的报错,不过没有关系的,因为在react中本来就没有这个变量。只需要将在html中添加<script>require(‘./renderer.js’)</script>这步去掉就行了。

链接:https://www.jianshu.com/p/20817ba6041d 

大佬总结

以上是大佬教程为你收集整理的Electron和create-react-app构建应用的通信问题全部内容,希望文章能够帮你解决Electron和create-react-app构建应用的通信问题所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:Electron