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

Question

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

当我将 package.json 中的类型设置为模块时，脚本

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。

Answer 2

Alex Sedeke 的回答很好，但是请注意：

index.js 是无效代码

import { app } from "electron";
app.commandLine.appendSwitch('lang', 'zh-CN'); // 设置electron默认语言为中文

你应该

...
(async function () {
  ...
  globalThis.electron.app.commandLine.appendSwitch('lang', 'zh-CN'); 
})()