Uncaught ReferenceError: require is not defined 怎么解决
时间: 2025-01-23 13:57:35 浏览: 100
### 解决方案概述
当遇到 `Uncaught ReferenceError: require is not defined` 错误时,这通常是由于尝试在不支持 Node.js 的环境中使用了特定于 Node.js 的模块加载方式所引起的。对于 Electron 应用程序而言,此问题可以通过调整应用配置来解决。
#### 配置 Webpack 支持 CommonJS 模块
为了使 Webpack 能够处理 CommonJS 格式的模块定义(即通过 `require()` 加载依赖),可以修改 webpack.config.js 文件中的 module 和 resolve 字段:
```javascript
module.exports = {
// ...
resolve: {
extensions: ['.js', '.json'],
modules: ['node_modules']
},
externals: [
// 不打包 node 内建库到 bundle 中
(context, request, callback) => {
if (/^electron/.test(request)) {
return callback(null, 'commonjs ' + request);
}
callback();
}
]
};
```
此外,在开发环境下建议开启 source map 功能以便调试:
```javascript
devtool: process.env.NODE_ENV === 'production' ? false : 'eval-source-map',
```
#### 修改 Electron 主进程与渲染器进程间的通信模式
从 Electron v12 开始,默认情况下启用了上下文隔离(context isolation),这意味着即使设置了 `nodeIntegration=true` ,也无法直接访问全局变量如 `require` 。因此需要进一步调整窗口创建参数:
```javascript
const { app, BrowserWindow } = require('electron');
let mainWindow;
app.whenReady().then(() => {
mainWindow = new BrowserWindow({
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
contextIsolation: false,
nodeIntegration: true,
enableRemoteModule: true
}
});
});
```
同时还需要编写预加载脚本(preload.js):
```javascript
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (api of ['versions', 'process']) {
window[api] = process[api];
}
})
```
以上方法适用于希望继续沿用早期版本行为的应用开发者;然而更推荐的方式是在现代应用程序架构下利用 IPC 或者其他安全机制实现主/渲染线程间的数据交换[^3]。
阅读全文
相关推荐
















