tsconfig 别名无法解析位于 baseUri 之上的路径

Question

我正在开发 monorepo，并注意到 tsconfig 无法解析当前项目之上的路径。

这是我的项目结构：

── apps
│   ├── sahl
│   │   ├── index.d.ts
│   │   ├── jest.config.ts
│   │   ├── next-env.d.ts
│   │   ├── next.config.js
│   │   ├── project.json
│   │   ├── public
│   │   ├── src
│   │   ├── tsconfig.json
│   │   └── tsconfig.spec.json
├── libs
│   └── shared
│       ├── data-access
│       └── zod-types
├── nx.json
├── openapi.json
├── package.json
├── pnpm-lock.yaml
├── prisma
│   └── schema.prisma
├── tools
│   ├── database
│   ├── tsconfig.tools.json
│   └── zod-to-openapi.ts
└── tsconfig.base.json

理想情况下，我希望“apps”目录中的文件夹能够访问“libs/shared”目录中的文件。

首先，我尝试将这些路径包含在

tsconfig.base.json

中，这样它们就可以扩展到 apps/sahl 的

tsconfig.json

// ./tsconfig.base.json
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "paths": {
      "@libs/*": ["./libs/**/*.ts"],
    }
  },
  "exclude": ["node_modules", "tmp"],
  "include": ["./libs/shared/data-access/*.ts", "./libs/shared/zod-types/modelSchema/*.ts"],
}

但不幸的是，经过一番调查后，发现 tsconfig 所承诺的扩展实际上是一种覆盖，而不是我所期望的合并。

然后我尝试将这些路径并包含在孩子中

tsconfig.json

：

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "baseUrl": "./",
    "rootDir": "../../",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true,
    "incremental": true,
    "types": ["jest", "node"],
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"],
      "@/styles/*": ["./src/styles/*"],
      "@/types/*": ["./src/types/*"],
      "@libs/*": ["../../libs/*"], //not working at build but vscode resolves the paths
    },
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/[*]/*.ts",
    "**/**/*.tsx",
    "../../apps/sahl/.next/types/**/*.ts",
    "../../dist/apps/sahl/.next/types/**/*.ts",
    "../../libs/shared/data-access/**/*.ts", // don't know whether necessary
    "../../libs/shared/zod-types/inputTypeSchemas/*.ts", // don't know whether necessary
  ],
  "exclude": [
    "node_modules",
    "jest.config.ts",
    "src/**/*.{spec,test}.ts"
  ]
}

所以我有点卡住了，我觉得 tsc 在构建时没有正确解析路径，但这无法解释为什么 vscode 和“dev”部分（即下一个开发）仍在工作并识别路径.

如果你们有任何想法，我非常高兴听到！

蒂亚！

编辑

根据 @jagmitg 的建议，我已从子项中删除了 baseUri

tsconfig.json

以避免冲突：

// apps/sahl/tsconfig.json

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "rootDir": "../../",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true,
    "incremental": true,
    "types": ["jest", "node"],
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"],
      "@/styles/*": ["./src/styles/*"],
      "@/types/*": ["./src/types/*"],
    },
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/[*]/*.ts",
    "**/**/*.tsx",
    "../../apps/sahl/.next/types/**/*.ts",
    "../../dist/apps/sahl/.next/types/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "jest.config.ts",
    "src/**/*.{spec,test}.ts"
  ]
}

并将其设置为

tsconfig.base.json

:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "paths": {
      "@libs/*": ["./libs/**/*"],
    }
  },
  "exclude": ["node_modules", "tmp"],
  "include": ["./libs/shared/data-access/*.ts", "./libs/shared/zod-types/modelSchema/*.ts"],
}

好消息是，现在我收到了一条新的错误消息：

- info Creating an optimized production build...
       Failed to compile.
       
       ./src/app/api/articles/[articleId]/route.ts
       Module not found: Can't resolve '@libs/shared/data-access/articles.data'

可能是包含中的拼写错误或相对路径错误？

Answer 1

tsconfig.base.json - 我建议将 baseUrl 设置为您已经在执行的存储库的根目录。

不要覆盖子配置中的

baseUrl

。这将使基本配置的路径映射保持有效。

基本配置应如下所示：

{
  "compilerOptions": {
    "baseUrl": "./",
    // ...
    "paths": {
      "@libs/*": ["./libs/*/*"],
    }
  },
  // ...
}

子配置应该看起来像这样：

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    // No baseUrl override here
    "rootDir": "../../",
    // ...
    "paths": {
      "@/*": ["./apps/sahl/src/*"],
      "@/styles/*": ["./apps/sahl/src/styles/*"],
      "@/types/*": ["./apps/sahl/src/types/*"],
    }
  },
  // ...
}

编辑：

我建议尝试

babel-plugin-module-resolver

来解决这个问题。

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    ["module-resolver", {
      "root": ["./"],
      "alias": {
        "@libs": "./libs"
      }
    }]
  ]
}