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

Question

我在玩可观察的笔记本，我很喜欢它。现在我想在我的网络应用程序中嵌入一个笔记本。使用香草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忽略编译时错误，但是这些错误发生在运行时。我也在研究进口-http Webpack插件，但这仍然不能解决编译时错误。

我完全理解这不是专门针对Obervable的，而是更多地与TypeScript和/或Webpack有关。不过，我们也希望能观察到的其他办法也会受到欢迎。

因此，我的问题是:如何在中动态导入远程/外部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中

我想是因为打字稿找不到关于这个模块的任何定义

这个回答和这个文档可以帮助你。

我确实创建了一个示例项目来测试这个项目。

.
└── ./
    ├── src/
    │   ├── declarations.d.ts
    │   └── index.ts
    └── tsconfig.json

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

// declarations.d.ts
// either
declare module 'https://api.observablehq.com/d/d64beea6bedb0375.js?v=3'

// or
declare module "https://api.observablehq.com/d/d64beea6bedb0375.js?v=3" {}

// or
declare module "https://api.observablehq.com/d/d64beea6bedb0375.js?v=3" {
  export default function define(runtime:any, observer:any):any
}

{
  "compilerOptions": {
   ....your config
  },
  "include": [
    ....your config
    "./src/declarations.d.ts" // add this line
  ]
}