uncaught referenceerror process is not defined electron 解决方法

我在使用 electron 调用 process 函数时候报错,如下:

Uncaught ReferenceError: process is not defined
at index.html:16

可是我已经设置 nodeIntegration =true,仍然不起作用。
我的工具版本:
npm 7.6.1
Electron 13.0.1
Node.js 14.16.0
Chromium 91.0.4472.69

解决方法

webPreferences: { nodeIntegration: true, contextIsolation: false }

参考

Process is not defined for Electron’s Getting Started App [duplicate]

### 解决方案概述 当遇到 `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]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值