时间戳

首页 > 解决方案 > 如何将单个 spa 浏览器内实用程序模块导入 TypeScript 包裹项目

typescript - 如何将单个 spa 浏览器内实用程序模块导入 TypeScript 包裹项目

问题描述

我在下面有 3 个 TypeScript 项目：

  1. 根配置
  2. 包裹，让我们称之为my-app
  3. 浏览器内的实用模块，让我们称之为api

以上所有项目都是使用create-single-spa命令生成的。

在api/src/lomse-api.ts文件中，我正在导出fetchPeople模块，如下所示：

export { fetchPeople } from "./PeopleApi.ts";

根据single-spa 文档，鉴于我orgName的 islomse和projectNameis api，我应该能够将fetchPeople模块导入my-app（包裹应用程序），如下所示：

import { fetchPeople } from '@lomse/api'

由于my-appproject 是一个 TypeScript 项目，上面的语句肯定会抛出下面的错误：

Cannot find module '@lomse/api' or its corresponding type declarations.

有没有办法来解决这个问题？

标签： typescriptsingle-spa

解决方案

该错误是 TypeScript 错误，而不是 JavaScript 或 single-spa 错误。以下是您需要执行的操作的选项：

  1. 使用 Node.js 兼容的模块格式（UMD、Commonjs）将您的实用程序模块发布到注册表（类型是可选的，因为 TS 可以从源推断，尽管类型更好）。然后将其安装到彼此的微前端的 node_modules 中。由于它是 webpack 外部的，node_modules 中的版本将仅用于 typescript 编译，而不用于在浏览器中执行。但是，这可能需要第二次构建，并且可能由于互操作差异而产生问题。
  2. 您可以只发布模块类型，无论是作为单独的包还是与其他微前端的类型一起发布。
  3. 模拟实用程序模块的类型，如此处所述。

资源：

推荐阅读