node.js - ElectronJS 必须使用 import 来加载 ES Module

问题描述

我是 Electron 的超级新手，我正在做一个个人学习项目。我从官方的入门指南开始，做了一些自定义：

使用打字稿
使用 ES6 模块
使用 ESLint
将所有tsc输出移动到dist文件夹

当我运行时，npm start我收到以下错误：

App threw an error during load
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: F:\Gabriele\DEV\arcanium\dist\main.js
require() of ES modules is not supported.
require() of F:\Gabriele\DEV\arcanium\dist\main.js from F:\Gabriele\DEV\arcanium\node_modules\electron\dist\resources\default_app.asar\main.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename F:\Gabriele\DEV\arcanium\dist\main.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from F:\Gabriele\DEV\arcanium\package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1096:13)
    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:12913)
    at loadApplicationPackage (F:\Gabriele\DEV\arcanium\node_modules\electron\dist\resources\default_app.asar\main.js:110:16)
    at Object.<anonymous> (F:\Gabriele\DEV\arcanium\node_modules\electron\dist\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)

这是我的 package.json 文件

{
  "main": "dist/main.js",
  "type": "module",
  "scripts": {
    "start": "npm run build && electron ./dist/main.js",
    "build": "tsc && npm run lint",
    "lint": "npx eslint --fix"
  },
  "devDependencies": {
    "@tsconfig/node16": "^1.0.1",
    "@typescript-eslint/eslint-plugin": "^4.28.3",
    "@typescript-eslint/parser": "^4.28.3",
    "electron": "^13.1.7",
    "eslint": "^7.30.0",
    "eslint-plugin-react": "^7.24.0",
    "prettier": "^2.3.2",
    "typescript": "^4.3.5"
  }
}

还有我的 tsconfig.json 文件

{
  "extends": "@tsconfig/node16/tsconfig.json",
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "moduleResolution": "node",
    "sourceMap": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowJs": true,
    "outDir": "dist"
  },
  "include": ["src"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

还有我的 .eslintrc 文件

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "indent": ["warn", 2],
    "linebreak-style": ["warn", "win"],
    "quotes": ["warn", "double"],
    "semi": ["error", "always"],
    "curly": "warn"
  },
  "ignorePatterns": "dist"
}

除此之外，我只是将require语句更改为importmain.js 中的语句：

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

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

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

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

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

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

我的问题是：

require我在dist文件夹中找不到任何内容，因为文件tsc保持main.js原样，带有import语句。该错误实际上意味着什么？
我想要实现的是，我想以 ES6 的方式编写 TS 代码，并让它编译成任何可以工作的东西（我保留ES6了target和module tsc选项），所以我想我不应该被迫编译成 ES5 ，对？但是尝试使用targetES5 时错误不会改变。我完全不解……
可能是正确的答案：我在这张照片中遗漏了一些重要的东西吗？

标签： node.jstypescriptelectron

node.js - ElectronJS 必须使用 import 来加载 ES Module

问题描述

解决方案

推荐阅读