create-react-app和electron报错fs.existsSync is not a function

将create-react-app与electron创建出的一个项目中。React中无法使用electron

当在React中使用require(‘electron’)时就会报
Uncaught TypeError: fs.existsSync is not a function at getElectronPath (index.js:8)
因为React中无法使用Node.js的模块.
所以，百度了下：方案如下

1. 创建renderer.js文件

global.electron = require('electron');

2. 修改main.js文件

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

win = new BrowserWindow({
        width: 1000,
        height: 800,
        webPreferences: {
            javascript: true,
            plugins: true,
            nodeIntegration: true, // 是否集成 Nodejs
            webSecurity: false,
            preload: path.join(__dirname, '../public/renderer.js') // 但预加载的 js 文件内仍可以使用 Nodejs 的 API
        }
    })

3. 在React组件中如下使用electron

   const electron = window.electron;

因为要使用进程通讯，所以可以在渲染进程中直接这么写：

const ipcRenderer = window.electron.ipcRenderer;

在此时，就没有那个TypeError: fs.existsSync is not a function 的报错了。
当不再报fs.existsSync is not a function错误后，开始了新的错误，

Uncaught ReferenceError: require is not defined

不知道怎么回事，我就在看我的main.js，node环境是不应该出现require没定义的报错的，所以百度了很多，所以修改了下我的几个文件：
index.html:

<script>
    window.electron = require('electron');
  </script>
  <div id="root"></div>

main.js:

win = new BrowserWindow({
        width: 1000,
        height: 800,
        webPreferences: {
            nodeIntegration: true, // 是否集成 Nodejs,把之前预加载的js去了，发现也可以运行
        }
    })

在引用这个的渲染进程中：

getName = (e) =>{
        e.preventDefault()
        const ipcRenderer = window.electron.ipcRenderer;
        // console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

        // ipcRenderer.on('asynchronous-reply', (event, arg) => {
        //     console.log(arg) // prints "pong"
        // })
        ipcRenderer.send('asynchronous-message', 'ping')
        // ipcRenderer.send('get-reader-list', '')
    }

然后就可以

npm run electron

完美的运行了。

开心~~~谢谢帮助过我的人！@天道酬勤，
小小水滴，虽然不起眼，但是可以一点一点，聚集成大海！慢慢来，有时候觉得难走时，是在走上坡路，加油！
后来，重新新建了一个项目，发现两种方法都可行，可以多次尝试下。