javascript - Electron JS : Must use import to load ES Module

Question

我刚从 Electron Docs 开始学习 Electron .我用过 ES6 (import/export)而他们使用 require .
我已添加 type:module在我的package.json而且我还更改了 js扩展至 mjs ，但每次我运行 npm start (我的 Node 版本 => 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:

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

Main.mjs:

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();
  }
});

preload.js

window.addEventListener("DOMContentLoaded", () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector);
    if (element) element.innerText = text;
  };

  for (const type of ["chrome", "node", "electron"]) {
    replaceText(`${type}-version`, process.versions[type]);
  }
});

Answer 1

首先你必须在你的 node_modules 中加载 esm。
$ npm install 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/
希望这会有所帮助。