如何在 Electron 16 中使用 es 模块而不是 commonjs ？

Question

如何将esm与电子16一起使用？

当我将 package.json 中的类型设置为 module 时，脚本electron .无法正常工作。

{
  "name": "electronapp",
  "version": "1.0.0",
  "main": "main.js",
  "type": "module",
...
}

Answer 1

当我尝试在 Electron 中使用 Vue 3 和 Vite 创建一个新项目时，我偶然发现了同样的问题。我在GitHub上找到了一个不错的入门模板。不幸的是，在软件包的第一次更新中，出现了一些软件包已切换到纯 ESM 的问题。

Electron 在 ESM 方面的问题从 GitHub 上的问题中可以清楚地看出： https: //github.com/electron/electron/issues/21457。

Electron 使用 ESM，但不适用于通过配置接收的文件。Electron 尝试使用“require”包含这些文件，但失败了。不过也提出了一个解决方案，可以很好地使用。

将您的 eletron 指向 cjs 文件。
在 package.json 中：

  "type": "module",
  "main": "main.cjs"

在main.cjs中：

import('./application.mjs');

之后，要导入电子，请在您的 esm 部分中使用它：

const require = createRequire(import.meta.url);
const { BrowserWindow, app: electronApp, ipcMain } = require('electron');

但这只是解决方案的粗略轮廓。我分叉了入门包并在 ESM 分支中安装了解决方案： https: //github.com/studioalex/ electron-vue-template/tree/ESM 。