Electron和create-react-app构建应用的通信问题

2018年08月28日Web前端、桌面应用

这种环境下,使用官方的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上,给其他地方的数据使用,如下:

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中添加这步去掉就行了。

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