如何在 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');