解决 Electron 14 之后版本使用 remote 模块报错

Electron 介绍

Electron是一个能够使用HTML、CSS和JavaScript构建跨平台桌面应用的开源框架。它是由GitHub开发并维护的，最初是为了构建GitHub的桌面客户端而创建的。

Electron基于Node.js和Chromium项目，通过将这两个技术结合起来，它能够在桌面环境中运行Web技术。而且，它提供了丰富的API和工具，使开发者能够轻松地创建跨平台的桌面应用。

使用Electron，开发者可以使用熟悉的Web技术进行应用开发，无需学习新的编程语言或工具。应用程序可以在Windows、Mac和Linux等多个操作系统上运行，而且具有与原生应用相似的外观和性能。

Electron的应用程序由两部分组成：主进程和渲染进程。主进程是一个Node.js进程，负责管理应用的生命周期和与操作系统的交互，而渲染进程是一个Chromium渲染进程，负责显示应用的用户界面。

除了基本的UI显示功能，Electron还提供了一系列强大的API，用于实现文件系统访问、网络通信、系统通知、菜单、快捷键等功能。开发者还可以使用Electron的插件机制来扩展应用的功能。

总的来说，Electron是一个强大且易于使用的框架，能够让开发者用Web技术构建跨平台的桌面应用。它被广泛应用于各种应用领域，如代码编辑器、图形设计工具、聊天应用、音乐播放器等。

remote 模块介绍

Electron的remote模块是Electron提供的一个功能强大且方便的API，用于在主进程和渲染进程之间进行通信和调用。

在Electron中，主进程和渲染进程是分离的，它们运行在不同的上下文中。主进程负责管理应用的生命周期和与操作系统的交互，而渲染进程则负责显示应用的用户界面。

remote模块允许在渲染进程中访问主进程中的对象和方法。在渲染进程中，可以像访问本地对象一样直接访问主进程中的对象，而无需通过IPC（进程间通信）进行复杂的消息传递。

通过remote模块，开发者可以使用一些预定义的模块，如BrowserWindow、app、Menu等，直接在渲染进程中调用它们的方法。

需要注意的是，使用remote模块访问主进程中的对象会涉及到一些安全性和性能方面的考虑。因此，在使用remote模块时需要谨慎处理，避免出现潜在的安全漏洞或性能问题。

总的来说，Electron的remote模块提供了一个简单而强大的方式，在主进程和渲染进程之间进行通信和调用。它能够帮助开发者更方便地实现不同进程之间的交互，提高应用的开发效率和用户体验。

Electron 14 之前版本使用 remote 模块

main.js

// 导入 app, BrowserWindow 模块
const { app, BrowserWindow, ipcMain } = require('electron')

app.on('ready', () => {
  let mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  }) 

  mainWindow.loadFile('index.html')
  mainWindow.webContents.openDevTools()
  ipcMain.on('message', (event, arg) => {
    console.log('arg:' + arg)
    event.reply('reply', 'hello from main process')
  })
})

renderer.js

/**
 * This file is loaded via the <script> tag in the index.html file and will
 * be executed in the renderer process for that window. No Node.js APIs are
 * available in this process because `nodeIntegration` is turned off and
 * `contextIsolation` is turned on. Use the contextBridge API in `preload.js`
 * to expose Node.js functionality from the main process.
 */

// 引入模块
const { ipcRenderer} = require('electron');
const { BrowserWindow } = require('electron').remote;

window.addEventListener('DOMContentLoaded', () => {
    document.getElementById('node-version').innerHTML = process.versions.node
    document.getElementById('send').addEventListener('click', () => {
        ipcRenderer.send('message', 'hello from renderer')
        let win = new BrowserWindow({ width: 800, height: 600})
        win.loadURL('https://baidu.com')
    })
    ipcRenderer.on('reply', (event, arg) => {
        document.getElementById('message').innerHTML = arg
    })
})

Electron 14 之后版本使用 remote 模块

因 remote 模块移除，所以需额外安装该模块。
进入项目目录，安装 remote 模块

npm install --save @electron/remote

main.js

// 导入 app, BrowserWindow 模块
const { app, BrowserWindow, ipcMain } = require('electron')

// 第一步：引入remote
const remote = require('@electron/remote/main');
// 第二步： 初始化remote
remote.initialize();

app.on('ready', () => {
 
  let mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  }) 

  mainWindow.loadFile('index.html')
  mainWindow.webContents.openDevTools()
  ipcMain.on('message', (event, arg) => {
    console.log('arg:' + arg)
    event.reply('reply', 'hello from main process')
  })

  // 第三步： 开启remote服务
  remote.enable(mainWindow.webContents);

renderer.js

/**
 * This file is loaded via the <script> tag in the index.html file and will
 * be executed in the renderer process for that window. No Node.js APIs are
 * available in this process because `nodeIntegration` is turned off and
 * `contextIsolation` is turned on. Use the contextBridge API in `preload.js`
 * to expose Node.js functionality from the main process.
 */

const { ipcRenderer} = require('electron')
// 引入remote远程操作窗口，新版本需要下载@electron/remote
const {BrowserWindow} = require('@electron/remote');

window.addEventListener('DOMContentLoaded', () => {
    document.getElementById('node-version').innerHTML = process.versions.node
    document.getElementById('send').addEventListener('click', () => {
        ipcRenderer.send('message', 'hello from renderer')
        let win = new BrowserWindow({ width: 800, height: 600})
        win.loadURL('https://baidu.com')
    })
    ipcRenderer.on('reply', (event, arg) => {
        document.getElementById('message').innerHTML = arg
    })
})