9

我正在玩Observable 笔记本并喜欢它。现在我想在我的网络应用程序中嵌入一个笔记本。使用 vanilla Javascript 和 Javascript 模块效果很好：

<script type="module">
  import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
  import notebook from "https://api.observablehq.com/d/d64beea6bedb0375.js?v=3";
  new Runtime().module(notebook, Inspector.into(document.body));
</script>

当我尝试通过 TypeScript 中的远程 URL 导入模块时，出现编译错误：

// error: Cannot find module 'https://api.observablehq.com/d/d64beea6bedb0375.js?v=3'
import notebook from 'https://api.observablehq.com/d/d64beea6bedb0375.js?v=3';

我尝试使用 忽略编译时错误// @ts-ignore，但随后它们发生在运行时。我也在研究import-http Webpack 插件，但这似乎仍然不能解决编译时错误。

我完全理解这不是 Obervable 特有的，而是与 TypeScript 和/或 Webpack 更相关。然而，Observable 特有的替代方案也会受到赞赏。

所以，我的问题是：如何在 TypeScript 中动态导入远程/外部 ES 模块？这样我就可以重现类似的内容：

// url = 'https://api.observablehq.com/d/d64beea6bedb0375.js?v=3';

public async foo(url: string): Promise<void> {
  const notebook = await import(url);

  const runtime = new Runtime();
  const main = runtime.module(notebook, Inspector.into(document.body));
}
4

0 回答 0