Electron各版本API变更及版本升级报错汇总

发表于 | 分类于
Electron各版本API变更及版本升级报错汇总

版本升级注意项

每个版本都有废弃和移除的API，废弃的依旧可以用，所以这里只列一些常用的被移除的API及对应的替换方法。

各版本移除的API

官方文档：https://www.electronjs.org/docs/latest/breaking-changes/#removed-remote-module

14.0

remote模块

移除remote模块前最新的Electron版本

1
"electron": "13.4.0"

The remote module was deprecated in Electron 12, and will be removed in Electron 14. It is replaced by the @electron/remote module.

1
2
// Deprecated in Electron 12:
const { app, dialog } = window.require('electron').remote

替换方式

安装依赖

1
npm install --save @electron/remote

主进程

1
2
3
4
// In the main process:
require("@electron/remote/main").initialize();
//创建每一个窗口后，都要调用
require("@electron/remote/main").enable(win.webContents);

渲染进程

1
2
// Replace with:
const { app, dialog } = window.require("@electron/remote");

打包找不到依赖的解决方法

https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html#table-of-contents

项目根目录vue.config.js中修改配置，没有该文件创建即可。

1
2
3
4
5
6
7
8
9
// vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      externals: ['@electron/remote'],
      nodeModulesPath: ['./node_modules']
    }
  }
}

官方推荐方式

remote模块官方不推荐使用，如果项目使用remote的地方较少，可以更换为下面的方式替换。

1
2
3
4
5
6
7
8
9
10
// Renderer process
ipcRenderer.invoke('some-name', someArgument).then((result) => {
    // ...
})

// Main process
ipcMain.handle('some-name', async (event, someArgument) => {
    const result = await doSomeWork(someArgument)
    return result
})

示例

假如弹窗选择路径的功能

原来在渲染进程中是这样的

1
2
3
4
5
6
7
8
9
10
11
12
select_dir: function() {
    dialog
        .showOpenDialog({
        properties: ["openDirectory"]
    })
        .then(result => {
        if (!result.canceled) {
            this.outpath = result.filePaths[0];
        }
    })
        .catch(() => {});
}

替换为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 渲染进程
const { ipcRenderer } = window.require("electron");
select_dir: function() {
    ipcRenderer.invoke("select_dir", "").then(result => {
        if (result && !result.canceled) {
            this.outpath = result.filePaths[0];
        }
    });
},
    
//主进程
const { ipcMain, dialog } = require("electron");
ipcMain.handle("select_dir", async () => {
  try {
    return await dialog.showOpenDialog({
      properties: ["openDirectory"]
    });
  } catch (e) {
    return null;
  }
});

13.0

Extension

1
2
3
4
5
// Removed in Electron 13
BrowserWindow.addExtension(path)
BrowserWindow.addDevToolsExtension(path)
// Replace with
session.defaultSession.loadExtension(path)
1
2
3
4
5
// Removed in Electron 13
BrowserWindow.removeExtension(name)
BrowserWindow.removeDevToolsExtension(name)
// Replace with
session.defaultSession.removeExtension(extension_id)
1
2
3
4
5
// Removed in Electron 13
BrowserWindow.getExtensions()
BrowserWindow.getDevToolsExtensions()
// Replace with
session.defaultSession.getAllExtensions()

12.0

crashReporter

Removed: crashReporter.getCrashesDirectory()

The crashReporter.getCrashesDirectory method has been removed. Usage should be replaced by app.getPath('crashDumps').

1
2
3
4
// Removed in Electron 12
crashReporter.getCrashesDirectory()
// Replace with
app.getPath('crashDumps')

9.0

<webview>.getWebContents()

This API, which was deprecated in Electron 8.0, is now removed.

1
2
3
4
5
// Removed in Electron 9.0
webview.getWebContents()
// Replace with
const { remote } = require('electron')
remote.webContents.fromId(webview.getWebContentsId())

错误汇总

require

引用时报错

1
const { ipcRenderer } = window.require('electron');

错误信息

window.require not a function

解决方式

1
2
3
4
5
webPreferences: {
    nodeIntegration: true,
    enableRemoteModule: true,
    contextIsolation: false,
},