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

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

这种环境下，使用官方的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 。

ElectronReacttips

目录