如何使 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