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')
})
//渲染进程
<script>
const ele = require('electron')
console.log(ele)
</script>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()或者
<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<!-- 再引入jq等框架所需js <===把我当作注释吧 -->
<script type="text/javascript" src="jquery.js"></script>
</head>之后在使用require的地方需要使用nodeRequire替代。
我是这样使用的
//渲染进程
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script>
const ele = nodeRequire('electron')
console.log(ele)
</script>解决方案二：
主进程代码如下：
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')
})渲染进程代码如下：
<script>
const ele = require('electron')
console.log(ele)
</script>在原代码基础上，就增加了一句，将支持完整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的环境。
上一篇： 喜马拉雅听书的音频怎么下载至电脑？