无法从普通 JS 导入/需要 ES 模块答案

【问题标题】：Unable to import/require ES module from common JS无法从普通 JS 导入/需要 ES 模块
【发布时间】：2022-01-19 19:37:45
【问题描述】：

我正在使用 electron 为特定项目构建 UI，问题是我在 ES 中编写了核心代码，而显然 ES 破坏了 electron。

我要做的是将一些回调函数从 HID.js 导出到我的电子应用程序

HID.js

export {setKeycode, getLayerKeycodes, getKeycode, findConnectedDevices};

index.js

const {setKeycode, getLayerKeycodes, getKeycode, findConnectedDevices} = require('../../core/HID.js');

这导致“错误：ES模块的require（）”的预期结果

问题是，如果我尝试导入它，我将不得不将电子应用程序更改为“模块”，并且由于某种原因 ES 破坏了整个电子库，所以这是不可能的。

如何在不破坏电子的情况下导入这些函数？

【问题讨论】：

Electron 没有实现 ESM 的所有功能，尤其是导入/导出语句。你需要使用像 babel 这样的工具来编译它们。

标签： import electron require commonjs

【解决方案1】：

就像@darkomen 提到的，可以在运行电子之前转译所需的模块，然后导入转译文件。但是，我发现将原始代码更改为 cms 要容易得多，因为它可能会失控。如果你真的想使用 babel 方法：

npm install --save-dev @babel/cli @babel/core @babel/preset-env

然后，在同一个文件夹中打开一个名为 babelrc.json 的文件并输入：

{
  "presets": [
    ["@babel/env", {
      "targets": {
        "node": "current"
      }
    }]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

创建这些脚本 - 将 index.js 更改为您要转换的文件，记得将“软件”文件夹也更改为您需要的文件夹。当构建脚本运行时，它将打开一个 dist 文件夹（如果它不存在）并将转译文件保存在那里。

  "scripts": {
    "build": "babel index.js -d dist",
    "start": "npm run build && electon ../software/src"
  }

现在，不要导入普通的 index.js，而是导入 dist 中的那个。每次运行时，启动脚本都会转换索引。

花了很长时间才弄清楚如何做到这一点，它确实有效，但它需要更改一些路径，因为文件现在位于一个新文件夹中。它还产生了许多其他问题，因此如果您可以选择将代码更改为 commonjs - 这是更简单的解决方案。

【讨论】：