是否可以使用 single-spa（导入 map + SystemJS）并包含 TypeScript 声明？

Question

我创建了一些遵循与 react-microfrontend projects listed on the Single-spa examples page 相同模式的应用程序。但是，这些示例并未使用 TypeScript。

当 App2 尝试导入存在于 App1 中的函数时，我收到一个 TS 错误，因为 App2 无法找到 App1 对象的类型。这对我来说很有意义，因为 root-config project 的 index.html 文件中引用的 importmap.json 只为每个微前端的 .js 文件列出了 URL。我真的不想到处加上@ts-ignore语句，我也不想在没有类型安全的情况下进行跨应用通信。

我所指的例子：

Planets 应用程序中的

This file 引用了 Styleguide 应用程序中的 Button 组件。我无法构建它，除非我在 import 语句之前的行中放置一个 @ts-ignore，因为我的 Planets 应用找不到 Styleguide 的类型声明。

总的来说，我对导入地图和 SystemJS 还很陌生，所以如果有人能指出正确的方向，我将不胜感激。我实际上经历了将我的 Styleguide 构建为常规 npm 库并将其作为依赖项包含在 Planets package.json 文件中的麻烦......这在某种程度上破坏了在第一名。

importmap.json

{
  "imports": {
    "@react-mf/planets": "//localhost:9000/react-mf-planets.js",
    "@react-mf/styleguide": "//localhost:9001/react-mf-styleguide.js"
  }
}

page.component.ts

// @ts-ignore
import { Button } from "@react-mf/styleguide";

...

render() {
  return (
    // Unable to view the available props
    <Button label="Hello World" />
  );
}

Answer 1

很遗憾，它们不能通过导入映射共享，因为它在浏览器中运行，而浏览器不理解 TypeScript 语法。

您的备选方案是：

将您的模块类型发布到 npm 注册表，然后 npm install 将其发布到每个相关的微前端
- 这里有一个警告：您需要在共享模块的每个新发布时更新它，但这可以通过各种工具自动完成，例如 renovate

可以在这个 Github 问题上找到更多信息：https://github.com/single-spa/single-spa/issues/609#issuecomment-665132965

是否可以使用 single-spa（导入 map + SystemJS）并包含 TypeScript 声明？

Is it possible to use single-spa (import map + SystemJS) and include TypeScript declarations?

reactjs

typescript

systemjs

micro-frontend

single-spa