请各位大神解答：electron框架加载渲染进程时，渲染进程require报错，项目未引入其他框架
极客观点
项目管理
HarmonyOS
// 主进程
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替代
参考 FAQ - I can not use jQuery/RequireJS/Meteor/AngularJS in Electron
你这里可以这么就修改
//渲染进程
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script>
const ele = nodeRequire('electron')
console.log(ele)
</script>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 的报错了。
方案2：
1，修改index.html:
<script>
window.electron = require('electron');</script>
<div id="root"></div>
2，main.js:
win = new BrowserWindow({
width: 1000,
height: 800,
webPreferences: {
nodeIntegration: true, // 是否集成 Nodejs,把之前预加载的js去了，发现也可以运行
}
})3，渲染进程这么写：
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', '')
}
试了一个最简单的方法：
渲染进程直接可以这么写， <script>
const ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.send('ping','我是渲染进程的')
</script> 就不会报错了，主进程监听就可以了，就不报错了
修改 main.js 中 配置
app.on('ready', () => {
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
});
});https://stackoverflow.com/que...
nodeIntegration: true is a security risk only when you're executing some untrusted remote code on your application. For example, suppose your application opens up a third party webpage. That would be a security risk because the third party webpage will have access to node runtime and can run some malicious code on your user's filesystem. In that case it makes sense to set nodeIntegration: false. If your app is not displaying any remote content, or is displaying only trusted content, then setting nodeIntegration: true is okay.
另外，可参考下面文档：
https://electronjs.org/docs/t...
3 回答1.3k 阅读✓ 已解决
2 回答1.5k 阅读✓ 已解决
3 回答1.4k 阅读✓ 已解决
1 回答1.5k 阅读✓ 已解决
1 回答1.4k 阅读✓ 已解决
4 回答620 阅读✓ 已解决
1 回答1.2k 阅读✓ 已解决
终于把问题解决了，但是仍然有疑惑，希望跟各位分享一下，也希望能得到大神的进一步解答。
先说一下，因为是学习的练习项目，文件很简单，就只有一个主进程和一个渲染进程。
主进程代码如下：
渲染进程代码如下：
在原代码基础上，就增加了一句，将支持完整node改为true，即：
代码即可正常运行，require不再报错，但是问题是，之前查了好多资料，都是提到因为要避免框架与node.js的冲突，都是建议用electron的时候将nodeIntegration禁止，而且查看文档的时候，文档提到nodeIntegration是默认为true的。
以上仍然存在的两个问题，希望等得到进一步解答，谢谢！