如何在 Chrome Devtools JS 控制台中从“http://bar.org/some-esm-module.js”中“导入 blah”？

Question

当我尝试从 Chrome devtools / javascript 控制台使用 ESM 导入时，它抱怨：

> import Confetti from 'https://cdn.skypack.dev/canvas-confetti'

Uncaught SyntaxError: Cannot use import statement outside a module

有什么方法可以说服 chrome 控制台以type='module'执行，以便我可以使用模块语句？ 或者另一种解决方法仍然允许交互式导入 ESM 模块以进行交互式开发？

我一直在大量使用 ESM 模块，特别是由Skypack自动转换的大型 NPM ESM 模块库。 这在静态开发中效果很好，但我是一个重度 REPL/浏览器 devtools 用户。

即使找到一个我可以用来加载 ESM 模块的第三方fakeImport(urlToESM)函数对我来说也是一个巨大的生产力提升。

Answer 1

动态import()和顶级await应该可以工作：

const { default: Confetti } = await import('https://cdn.skypack.dev/canvas-confetti');

Answer 2

动态导入可能会派上用场。

import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
});

您可以将 await 与它一起使用。

let module = await import('/modules/my-module.js');