在React前端项目中配置tsconfig路径别名遇编译错误求助

你遇到的问题核心是：tsconfig.json的paths仅给TypeScript提供类型检查时的路径映射，但Babel编译库代码时并没有把@bla开头的别名替换成相对路径，导致测试项目myproject无法识别这些别名路径。以下是你遗漏的关键配置步骤：

1. 给Babel添加别名解析插件 #

安装babel-plugin-module-resolver，让Babel编译时将别名转换为相对路径：

npm install babel-plugin-module-resolver --save-dev

在库项目mylib的babel.config.js（或.babelrc）中添加插件配置：

{
  "presets": ["react-app"], // 保留create-react-app默认的preset
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "@bla": "./src"
        }
      }
    ]
  ]
}

这个配置会把所有@bla/xxx的导入替换成相对于项目根目录的./src/xxx路径，最终编译后的代码里会变成相对路径，测试项目就能正常解析。

2. 修正tsconfig.json的路径映射 #

你的paths配置存在语法错误，baseUrl设为src后，@bla/*应该直接映射到src下的文件，修改tsconfig.json的compilerOptions：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@bla/*": ["*"] // 等价于映射到src/*
    }
  }
}

3. 确保库的package.json入口配置正确 #

在mylib/package.json中明确编译后文件的入口，比如：

"main": "./build/index.js",
"types": "./build/index.d.ts" // 如果输出类型文件的话

如果你的库是多文件导出（比如直接导入@bla/stuff/things/x），可以添加exports字段更精准地映射：

"exports": {
  ".": "./build/index.js",
  "./stuff/things/x": "./build/stuff/things/x.js"
}

4. 重新编译并更新链接 #

在mylib中重新执行编译命令：

npm run build

然后在myproject中重新链接库（避免缓存问题）：

npm unlink mylib && npm link mylib

完成以上步骤后，myproject中的import * as myImport from '@bla/stuff/things/x'就能正常解析了。

内容的提问来源于stack exchange，提问作者Eva