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

Question

我一直在尝试解决这个问题一个星期，但似乎无法真正找到问题所在。

我关注了this tutorial但我没有自己的项目结构(见下图)



在 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 吗？

提前致谢

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