使用TypeScript从URL动态导入远程ES模块

Question

我正在尝试使用Observable notebooks，并且非常喜欢它。现在我想在我的Web应用程序中嵌入一个笔记本。使用原生的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));
}

- Juliën

---

你解决这个问题了吗？ - calmar

Answer 1

简而言之：您需要声明模块并将其包含在tsconfig.json中。

我认为这是因为TypeScript找不到关于此模块的任何定义。
这个答案和这个文档可以帮助您。
我创建了一个样本项目来测试这个问题。

.
└── ./
    ├── 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
  ]
}

- nhy