Electron JS - Cannot destructure property ‘BrowserWindow‘ of ‘require(...).remote‘ as it is undefine

今天在Electron开发学习中遇到这个问题，查网上的资料都说需要在主进程窗口中设置enableRemoteModule: true,这种说法不完全正确，在Electron10之前可以解决，在10之后不行。根据官方文档要求，今天写一下Electron10之后remote的正确使用方法。

win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,  //表示使用node
      enableRemoteModule: true,
      preload: path.join(__dirname, 'preload.js'),
    },
  });

1、需要单独安装模块

        npm install --save @electron/remote

2、需要在主进程中初始化

// 只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口，监听该方法
app.whenReady().then(() => {
  require('@electron/remote/main').initialize()
  createWindow()

  // 在window和Linux环境下，没有窗口就退出了，MacOS不会，所以在没有窗口打开的时候，如果点击dock里面的应用事应该打开一个窗口
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

3、在渲染进程中引入

const { BrowserWindow } = require('@electron/remote')

// Electron 10之后这种引入方法已经不可用了，使用上面的方法，这个是需要注意的
// const { BrowserWindow } = require('electron').remote;

4、使用

// preload.js文件中
const { BrowserWindow } = require('@electron/remote')
contextBridge.exposeInMainWorld('sendMsg', {
  createW: () => {
    // 可以直接创建窗口了
    let win = new BrowserWindow({
      width: 400,
      height: 300,
    })
    win.loadURL('https://www.baidu.com')
  }
})



// renderer.js文件中
document.getElementById('create').addEventListener('click', () => {
  console.log('send click');
  window.sendMsg.createW()
})

注意：在Electron 10之后的方法引入中引入方法已经变了，大家注意，这个问题网上很多都是照搬的以前的处理方式，只设置 enableRemoteModule: true，已经不能解决问题了，所以这次遇到特此记录一下，避免有人踩坑。