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

【问题标题】：how to use es module but not commonjs with electron 16?如何在电子 16 中使用 es 模块而不是 commonjs？
【发布时间】：2022-01-25 10:20:18
【问题描述】：

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

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

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

【解决方案1】：

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

从 GitHub 上的 issue： https://github.com/electron/electron/issues/21457 ，electron 对 ESM 的问题非常清楚。

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

将您的电子设备指向一个 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 。

【讨论】：