React Monorepo使用yarn工作区+yarn workspaces+typescript+绝对导入

Question

我在使用yarn workspaces和typescript设置React项目时遇到了问题。

我的文件夹结构如下：

-root
 -package.json
 -workspaces
  -web
  -common

我的package.json文件如下：

{
  "name": "my-project-name",
  "private": true,
  "workspaces": [
  "workspaces/web",
  "workspaces/common"
  ],
  "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
}

我的问题是：当我从 common 项目中导入文件到 web 时，如果是 .js 文件，一切正常，但是如果是 .ts 或 .tsx 文件，则会出现 TypeError: Object(...) is not a function 的错误。

你有什么想法吗？

- Guilherme

---

我也遇到了同样的问题，希望能得到答案！ - Antoine Jaussoin

一年过去了，仍在寻找答案。 - Zalaboza

Answer 1

我建议采用以下文件层次结构：

- root
- package.json
- tsconfig.json
- packages 
  - common
    - package.json
    - tsconfig.json 
- services
  - web
    - package.json
    - tsconfig.json

packages 文件夹中的所有内容均可导入。服务是“叶子”项目，您不希望将其导入其他项目。

以此为基础，您的根 package.json 应该设置如下：

{
"name": "my-project-name",
  "private": true,
  "workspaces": [
    "packages": [
      "packages/*",
      "services/**/*"
    ],
  ],
}

然后，您还需要告诉 TypeScript 如何解析导入。

在根目录下的 tsconfig.json 文件中设置以下内容：

{
"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@myproject/*": ["packages/*/src"]
    },
}

确保每个tsconfig都使用"extends": "../../tsconfig.json"扩展此基础配置。

在web/package.json或任何需要导入common的包内，将common定义为依赖项：

{
  [...]
  "dependencies": {
    "@myproject/common": "*",
  }
}

现在，如果你的常规 package.json 的名称设置为 "@myproject/common"，你可以使用以下方式在 web 中导入你的代码：

import { myUtilFunction } from "@myproject/common";

我建议你也使用这样的设置进行学习。 你还需要稍微修改一下构建流程，因为你正在导入 /web 文件夹外的文件。如果需要更完整的示例，可以查看此存储库：https://github.com/NiGhTTraX/ts-monorepo

- HHK