如何让ESM在我的项目中与Electron一起工作？

Question

我已经尝试解决这个问题一个星期了，但似乎找不到问题所在。

我已经按照这篇教程的步骤操作，但是我使用的是自己的项目结构（如下图）：

在 esm.js 文件中：

require = require("esm")(module);
module.exports = require("./vickie.js");

我已经修改了 vickie.js 的代码：
从 const { app, BrowserWindow, ipcMain } = require('electron')
改为 import { app, BrowserWindow, ipcMain } from 'electron'

然后我得到了这个错误信息：

在 package.json 文件中：

{
  "name": "vickie",
  "type": "module",
  "version": "0.0.1",
  "description": "",
  "main": "./vickie.js",
  "scripts": {
    "start": "electron ./vickie.js"
  },
  "author": "Arijanit",
  "license": "ISC",
  "devDependencies": {},
  "dependencies": {
    "dotenv": "^8.2.0",
    "electron": "^8.2.3",
    "electron-builder": "^22.5.1",
    "esm": "^3.2.25",
    "mysql2": "^1.7.0"
  }
}

为什么会出现错误？我应该在package.json中输入额外的内容以启用esm吗？

提前致谢。

- Arijanit Nitti Salihu

---

大家好，有人找到正确的答案了吗？ - radiorz

看起来像是重复的（即使这是第一个）https://dev59.com/Qm0NtIcB2Jgan1znPuKs#70658025 - Alex Sedeke

我使用electron-vite使ESM支持在electron中工作：https://evite.netlify.app - Greg K

Answer 1

我创建了一个构建工具，可以让你在自己的Electron代码和从npm安装的模块中使用ESM：

https://github.com/mifi/build-electron

使用它：

yarn add -D build-electron concurrently wait-on

将您的 Electron 主要 ESM 源代码放在 src/main/index.js 中，预加载源代码放在 src/preload/index.js 中。

将以下内容添加到您的 package.json 文件中：

{
  "main": "build/main.js",
  "build": {
    "files": [
      "build/**/*"
    ]
  },
  "scripts": {
    "start": "concurrently -k \"build-electron -d\" \"wait-on build/.build-electron-done && electron .\"",
    "build": "build-electron"
  }

现在在您的项目根目录下创建一个配置文件 build-electron.config.js：

module.exports = {
  mainEntry: 'src/main/index.js',
  preloadEntry: 'src/preload/index.js',
  outDir: 'build',
  mainTarget: 'electron16.0-main',
  preloadTarget: 'electron16.0-preload',
}

现在您可以开始开发：

npm run start

并构建您的生产应用程序：

npm run build && npm exec electron-builder --mac

- Mikael Finstad