Electron 从低版本升级到高版本 - 开始使用@electron/remote的改造教程

toobeloong2025-10-16 17:25

众所周知，在使用老版本的Electron时，很多模块都是集成在一起的，后面随着版本迭代，一些模块慢慢的被剥离出来了，然后升级Electron的时候，用到这些模块的代码都要改造，今天就来讲讲如何在升级之后同步改造remote。

🙋‍♀️🌰：我的Electron是6.1.7（有够老的了，只有x86包，没有arm包，所以很多时候不用考虑架构问题，因为他就只支持一种架构），还不支持js的可选链语法（就是那种?.类的语法），导致在使用webview的时候渲染这种第三方页面就出问题了，解析错误，所以只能硬着头皮升级一下Electron，来，就搞到28.3.3吧（要升级一下node到v20哦）。

1.肯定就是要install 一下 electron@28.3.3的了

注意：如果是用mac M芯片的小伙伴，很可能有时候会遇到刚好你项目里面使用了自研的node包，升级完electron之后，发现需要arm的node包，而又刚好，你只有x86的node包，那么就只能安装一个x86的electron了。

bash 复制代码

npm i --arch=x64 electron@28.3.3

再装一下@electron/remote吧。

bash 复制代码

npm i @electron/remote

记得配套改一下babel.config.js和tsconfig.json

javascript 复制代码

// babel.config.js
{
    ...,
    presets: [
        ["@babel/preset-env", {
            targets: { electron: "28" }
        }
    ]
}

javascript 复制代码

// tsconfig.json

{
    ...,
    "types": [
      "@electron/remote"
    ]
}

好了，现在该改造一下使用到remote模块的地方了。

首先，在创建窗口之前，要初始化一下remote模块。

javascript 复制代码

// main/index.ts

...
import * as remoteMain from '@electron/remote/main'; // 主进程专用导入
...


constructor(){
    remoteMain.initialize();
}

然后在创建窗口之后，要激活一下remote。

javascript 复制代码

// 某个主进程文件

...
import * as remoteMain from '@electron/remote/main'; // 主进程专用导入
...


function create () {
    ...
    const win = new BrowserWindow(options);
    remoteMain.enable(win.webContents);
    ...
}

ok,能正常使用remote模块了，如果还有地方使用webview的，又要再改造一次，下次再写一篇文章来说说webview相关的改造（主要就是ipcMain和ipcRenderer的通信问题）。