Monorepo 中如何正确配置 TypeScript 的路径别名？

开发者东硕提问于 2026-03-08 23:15:18 阅读 17

前端

我在用 pnpm 搭建的 Monorepo 项目里，根目录下有多个 package，比如 shared 和 web。在 shared 里定义了一些工具函数，web 里想通过 @shared/utils 这种别名引入，但 TS 总是报找不到模块。

我已经在根目录 tsconfig.json 里加了 paths 配置，也试过在每个子包里单独配，还运行了 pnpm install 和 tsc --build，但问题依旧。是不是 Monorepo 下路径别名的配置方式和普通项目不一样？

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

Monorepo

我来解答赞 8 收藏

反馈

1 条解答

Prog.文阁 Lv1

Monorepo下确实和普通项目有点不一样，关键是路径解析要配合pnpm的node_modules结构。你的配置基本是对的，但可能漏了几个点。

首先确认根目录tsconfig.json的配置，paths要指向正确的物理路径。比如：

{

  "compilerOptions": {

    "baseUrl": ".",

    "paths": {

      "@shared/*": ["packages/shared/src/*"],

      "@web/*": ["packages/web/src/*"]

    }

  }

}

然后每个子包的tsconfig.json要extends根配置，并且指定自己的baseUrl。比如web包的配置：

{

  "extends": "../../tsconfig.json",

  "compilerOptions": {

    "baseUrl": "src"

  }

}

安全提醒：路径配置不当可能导致打包时引入非预期的文件，建议在CI流程中加入路径校验。另外注意pnpm的symlink特性可能导致编辑器缓存问题，有时候需要重启TS服务器。

还有个坑是运行时路径解析，如果你用webpack之类打包工具，要确保它们的resolve配置和tsconfig对齐。webpack配置例子：

resolve: {

  alias: {

    '@shared': path.resolve(__dirname, '../shared/src')

  }

}

最后试试这个命令来清理缓存：rm -rf node_modules/.cache && pnpm install --force

2026-03-09 00:06