require is not defined，在Electron渲染进程中加载模块报错

// 主进程
const {app, BrowserWindow, ipcMain} = require('electron')
app.on('ready', () => {
  // 新建窗口
  const win = new BrowserWindow()
  // 开启开发工具
  win.webContents.openDevTools()
  // 窗口加载页面
  win.loadFile('./layout/index.html')
})

//渲染进程

electron界面控制台本应该输出结果，但是控制台报错，Uncaught ReferenceError: require is not defined

解决方案一：

看看是否重命名了require如果你项目中使用了jQuery/RequireJS/Meteor/AngularJS等框架，如果使用了，就必须先禁用node特性或者在页面加载上面那些框架之前给require重命名并且删除delete window.require;delete window.exports;delete window.module;
具体解决办法如下：

// In the main process.
const { BrowserWindow } = require('electron')
let win = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false
  }
})
win.show()

或者

之后在使用require的地方需要使用nodeRequire替代。

我是这样使用的

//渲染进程

解决方案二：

主进程代码如下：

const {app, BrowserWindow, ipcMain} = require('electron')
const path = require('path')
app.on('ready', function() {
  // 创建页面
  const win = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true
    }
  })
  // 开启开发者工具
  win.webContents.openDevTools()
  // 导入渲染进程
  win.loadFile('./layout/index.html')
})

渲染进程代码如下：

在原代码基础上，就增加了一句，将支持完整node改为true，即：

webPreferences: {
  nodeIntegration: true
}

代码即可正常运行，require不再报错，但是问题是，之前查了好多资料，都是提到因为要避免框架与node.js的冲突，都是建议用electron的时候将nodeIntegration禁止，而且查看文档的时候，文档提到nodeIntegration是默认为true的。

 

解决方案三：

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 的报错了。

 

当然了，产生这些问题的主要原用是react作为前端工程没有使用Node的环境。