如何在 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('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
});

You can use await with it.

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

Answer 2

Dynamic import() 和 top-level await 应该有效：

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

How do I `import blah from 'http://bar.org/some-esm-module.js'` in the Chrome Devtools JS console?