React Monorepo yarn workspaces + typescript + absolute impor

Question

我在使用 yarn 工作区和打字稿设置 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失败。

关于我可能缺少什么的任何想法？

Answer 1

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

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

可以导入packages文件夹中的所有内容。服务是你不想在其他项目中导入的"叶"项目。

以此为基础，您的根包.json应该像这样设置：

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

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

在根 tsconfig.json 中，设置以下内容：

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

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

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

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

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

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

我建议您也通过这样的设置使用 learn。 您还需要稍微修改一下构建管道，因为您要导入/web 内部的文件，而这些文件位于/web 文件夹之外。有关更完整的示例，可以查看此存储库：https://github.com/NiGhTTraX/ts-monorepo