在 TypeScript 中从 URL 动态导入远程 ES 模块

Question

我在玩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));
}

Answer 1

TLDR：您需要声明模块并将其包含在tsconfig.json

\n

我认为这是因为打字稿无法找到有关此模块的任何定义\n
\n这个答案和本文档可以帮助您。\n
\n我确实创建了一个示例项目来测试这个。

\n

.\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ./\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src/\n    \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 declarations.d.ts\n    \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.ts\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n

\n

// index.ts\nimport notebook from "https://api.observablehq.com/d/d64beea6bedb0375.js?v=3";\n

\n

// declarations.d.ts\n// either\ndeclare module \'https://api.observablehq.com/d/d64beea6bedb0375.js?v=3\'\n\n// or\ndeclare module "https://api.observablehq.com/d/d64beea6bedb0375.js?v=3" {}\n\n// or\ndeclare module "https://api.observablehq.com/d/d64beea6bedb0375.js?v=3" {\n  export default function define(runtime:any, observer:any):any\n}\n

\n

.\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ./\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src/\n    \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 declarations.d.ts\n    \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.ts\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n

\n