如何使 ESM 在我的项目中与电子一起工作？

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

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