require 没有在带有 ipcRenderer.on 的 Electron-React-Webpack-Typescript 应用程序中定义

Posted 2023-03-13

【中文标题】require 没有在带有 ipcRenderer.on 的 Electron-React-Webpack-Typescript 应用程序中定义

【英文标题】：require is not defined in a Electron-React-Webpack-Typescript app with ipcRenderer.on

【发布时间】：2021-03-23 17:06:42

【问题描述】：

在 Electron-React-Webpack-Typescript 应用程序中，当插入 /src/renderer.ts 时，这些行：

ipcRenderer.on('messageFromMain', (event, message) => 
  console.log(`This is the message from the second window sent via main: $message`);
);

我收到此错误：

这是整个 /src/renderer.ts 文件：

import './app';

console.log('renderer.js is so happy to say you ???? hello....');

import  ipcRenderer, BrowserWindow  from 'electron';

ipcRenderer.on('messageFromMain', (event, message) => 
  console.log(`This is the message from the second window sent via main: $message`);
);

根据我在这里找到的：//How to import the electron ipcRenderer in a react / webpack 2 setup，我还放入了 tools/webpack/webpack.plugins.js：

const webpack = require('webpack');

module.exports = [
  new ForkTsCheckerWebpackPlugin(),
 new webpack.ExternalsPlugin('commonjs', [
    'electron'
  ])
];

我尝试将renderer.ts中的electron作为窗口组件导入：

const electron = window.require('electron');

但是得到了：

window.require is not a function

应该是和electron、react和webpack的交互有关，但是我还没找到解决办法。

有

webPreferences: 
  nodeIntegration: true, // Changed 
  enableRemoteModule: false,
  contextIsolation: false, // Changed
  nodeIntegrationInWorker: false,
  nodeIntegrationInSubFrames: false,
  preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
,

它不给require is not defined

在 renderer.ts 中插入时：

ipcRenderer.on('messageFromMain', (event, message) => 
  console.log(`This is the message from the second window sent via main: $message`);
);

我尝试在preload.js中导入ipcRenderer如下：

window.ipcRenderer = require('electron').ipcRenderer;

但我明白了

TS2339: Property 'ipcRenderer' does not exist on type 'Window & typeof globalThis'.
window.ipcRenderer = require('electron').ipcRenderer;
   |        ^^^^^^^^^^^

遵循这些迹象：https://github.com/electron/electron/issues/9920#issuecomment-672449613 我还在 preload.js 中处理了 ipcRenderer，如下所示：

import  ipcRenderer, IpcRenderer  from 'electron'

declare global 
  namespace NodeJS 
    interface Global 
      ipcRenderer: IpcRenderer
    
  


// Since we disabled nodeIntegration we can reintroduce
// needed node functionality here
process.once('loaded', () => 
  global.ipcRenderer = ipcRenderer
)

但是我在 renderer.ts 中遇到了同样的错误：

ERROR in src/renderer.ts:14:24
TS2304: Cannot find name 'ipcRenderer'.

所以.. 障碍可以表示为： 出于安全考虑如何保存

nodeIntegration:false,
contextIsolation: true,

并且能够同时在 renderer.ts 中导入 ipcRenderer？ 必须有办法让 renderer.ts 和 main.ts 相互通信，同时尽可能保证环境安全。

【参考方案1】：

是的。现在它似乎可以使用：

在 main.js 中

webPreferences: 
  nodeIntegration: false,
  enableRemoteModule: false,
  contextIsolation: true,
  nodeIntegrationInWorker: false,
  nodeIntegrationInSubFrames: false,
  preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
,

preload.js：

import  ipcRenderer, contextBridge  from 'electron';

contextBridge.exposeInMainWorld(
  'electron',
  
    doThing: () => ipcRenderer.send('do-a-thing')
  
)

index.d.ts：

declare interface Window 
  electron: 
    doThing(): void
  

和 renderer.ts ：

import './app';

console.log('renderer.js is so happy to say you ? hello....');

window.electron.doThing();