ElectronJS：必须使用 import 来加载 ES 模块

Question

我刚刚开始从Electron Docs学习 Electron 。我使用 ES6，(import/export)而他们使用require.

我已经添加type:module了 mypackage.json并且将js扩展名更改为mjs，但是每次运行npm start（ My node version => 14 ）时，我都会收到此错误：

App threw an error during load
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/alaeddine/Desktop/electron-app/petro-book/main.mjs
    at Module.load (internal/modules/cjs/loader.js:933:11)
    at Module._load (internal/modules/cjs/loader.js:776:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
    at loadApplicationPackage (/Users/alaeddine/Desktop/electron-app/petro-book/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:110:16)
    at Object.<anonymous> (/Users/alaeddine/Desktop/electron-app/petro-book/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:222:9)
    at Module._compile (internal/modules/cjs/loader.js:1078:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
    at Module.load (internal/modules/cjs/loader.js:935:32)
    at Module._load (internal/modules/cjs/loader.js:776:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12684)

包.json：

App threw an error during load
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/alaeddine/Desktop/electron-app/petro-book/main.mjs
    at Module.load (internal/modules/cjs/loader.js:933:11)
    at Module._load (internal/modules/cjs/loader.js:776:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
    at loadApplicationPackage (/Users/alaeddine/Desktop/electron-app/petro-book/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:110:16)
    at Object.<anonymous> (/Users/alaeddine/Desktop/electron-app/petro-book/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:222:9)
    at Module._compile (internal/modules/cjs/loader.js:1078:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
    at Module.load (internal/modules/cjs/loader.js:935:32)
    at Module._load (internal/modules/cjs/loader.js:776:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12684)

主要.mjs：

{
  "type": "module",
  "name": "petro-book",
  "version": "0.1.0",
  "author": "Menai Ala Eddine",
  "description": "Desktop application for gas stations",
  "main": "main.mjs",
  "scripts": {
    "start": "electron main.mjs"
  },
  "devDependencies": {
    "electron": "^12.0.7"
  }
}

预加载.js

import { app, BrowserWindow } from "electron";
import { join } from "path";

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: join(__dirname, "preload.js"),
    },
  });

  win.loadFile("index.html");
}

app.whenReady().then(() => {
  createWindow();

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

Answer 1

首先你必须在你的node_modules 中加载esm。

$ npm 安装 esm --save

将以下配置放入您的配置中。这是我的情况：

  "main": "src/index.cjs",
  "module" : "src/main.mjs",
  "type": "module",

将您的主脚本放在main.mjs中打开窗口（使用 es6 风格）。

这是index.cjs作为启动：

require = require("esm")(module/* , options */)
module.exports = require("./main.mjs")

以及main.mjs中的主要部分

import electron from 'electron';
import path from 'path';

const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

function createWindow() {
  ....
}

在这里查看https://arahutara.wordpress.com/2022/07/13/using-es6-import-in-electron-apps/

希望这会有所帮助。