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

Question

When I try to use an ESM import from the Chrome devtools / javascript console, it complains:

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

Uncaught SyntaxError: Cannot use import statement outside a module

Is there any way to convince the chrome console to execute as type='module' so I can use module statements? Or another way to workaround this that still permits interactive imports of ESM modules for interactive development?

I've been switching to heavily using ESM modules, in particular the large library of NPM ESM modules auto-converted by Skypack . This has worked great in static development, but I'm a heavy REPL / browser devtools user.

Even finding a third-party fakeImport(urlToESM) function I could use to load ESM modules would be a huge productivity improvement for me.

Answer 1

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

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

Answer 2

Dynamic import might come in handy.

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');

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports