javascript - 从 typescript 库导入的符号未定义

Question

我正在使用 Typescript 开发 React/Redux 应用程序。为了简化开发，我想为每个“域”或“功能”创建库，这些库将封装域的细节并将 API 公开给顶级应用程序。

到目前为止，我已经创建了一个名为 @foo/foo 的库(在 Typescript 中)和一个依赖于该库的主应用程序。该库有一个顶级 index.ts 文件，如下所示:

export * from "./services/Executor";
export * from "./services/Foo";
export * from "./services/Result";
export * from "./services/listFoo";

文件 ./services/Executor.ts 导出了一堆函数，例如:

export const fetchFoo = ...

然后我使用 create-react-app --script react-ts 创建了一个应用程序，并在我执行的其中一个操作文件中:

import { fetchFoo } from '@foo/foo';
...

但是当我使用 npm run start 运行 React 应用程序时，我得到:

TypeError: fetchFoo is not a function

根据我在网络上的研究，我假设我弄乱了模块导入语义:两个包都配置(在 tsconfig.json 中)编译为 es6 esModuleInterop:真。我尝试更改 modules 字段但无济于事。

我做错了什么？

更新:这里是一些演示问题的代码:https://github.com/abailly/react-ts-import-module

Answer 1

您应该在 package.json 中的“main”键下引用您的构建输出，并指向“types”键下的主声明文件:

{
  ...
  "main": "build/index.js",
  "types": "build/index.d.ts",
  ...
}

CRAs tsc/webpack 在打包时会寻找一个 JS 文件。默认情况下不转译导入的模块(虽然这可以启用，但因为你单独构建你的库，所以这不是必需的)

我希望它能起作用(如果是的话会有所帮助；)