使用“import(`./player/${file}`)”导入文件不会产生预期值

Question

我有这段代码可以在 CommonJS 上运行，但我想将我的项目切换到 ES6，但我收到 .bind 不是函数的错误，所以我想知道是否有人知道我将如何切换它。

for (const file of player) {
  const event = import(`./player/${file}`);

  Storage.player.on(file.split(".")[0], event.bind(null, client));
}

Answer 1

您正在使用动态导入。看看 documentation on MDN Web Docs:

To dynamically import a module, the import keyword may be called as a function. When used this way, it returns a promise.

所以你有一个Promise, not a Function。与往常一样，您可以简单地使用 console.log(event); 或任何其他 debugging technique 来检查 event 实际上是什么。

如果您位于 import 前面的 async function or top-level in an ES6 module, you can simply try using the await 关键字内。但是，您始终可以使用 .then 来接收导入的值。确保还处理导入错误，例如使用 .catch.

参见 How to return the response from an asynchronous call。

当您在循环中导入内容时，请考虑使用 Promise.all 等异步迭代技术。 player 是一个可迭代对象；如果它也是一个 Array you can use the .forEach 方法并在回调中使用动态导入绑定所有侦听器。如果不行，你绝对可以使用 Array.from 的第二个参数。

所以，这是我关于如何重写这段代码的建议，尽管有了更多上下文，可能会有更好的方法来处理异步性：

player.forEach(async (file) => Storage.player.on(
  file.split(".")[0],
  (await import(`./player/${file}`)).bind(null, client)
));

除了错误处理，您剩下要做的就是断言所有导入的文件实际上解析为一个函数，否则您仍然没有 .bind 方法。

使用“import(`./player/${file}`)”导入文件不会产生预期值

Importing a file using “import(`./player/${file}`)” doesn’t result in the expected value

javascript

dynamic-import

commonjs

ecmascript-6