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

Question

我已经尝试解决这个问题一周了，但似乎无法真正找到问题。

I've followed this tutorial but instead of having that project structure I've my own (see image below)

In the esm.js:

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

Then i've changed vickie.js:
From const { app, BrowserWindow, ipcMain } = require('electron')
To import { app, BrowserWindow, ipcMain } from 'electron'

Then I got this error

In 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"
  }
}

Why am I getting the error? Should I type in something extra in package.json to enable esm?

Thanks in advance

Answer 1

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

https://github.com/mifi/bu​​ild-electron

使用方法：

yarn add -D build-electron concurrently wait-on

将您的 Electron 主 ESM 源代码放入src/main/index.js并预加载源代码src/preload/index.js。

添加到您的package.json：

yarn add -D build-electron concurrently wait-on

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

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

现在您可以开始开发：

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