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

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

问题

将create-react-app与electron集成在了一个项目中。但是在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.js的API。在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;