Webpack无法识别node_modules依赖包tsconfig配置的baseUrl如何解决？

无法直接通过依赖包自带的tsconfig配置，让上层项目的Webpack构建自动识别该包的baseUrl规则。

tsconfig是项目级别的本地配置，仅作用于当前项目的TypeScript编译流程：一是你发布npm包时默认不会打包tsconfig文件到node_modules；二是上层项目的Webpack、TS编译器默认只会读取当前项目根目录的tsconfig，不会主动合并node_modules下所有依赖的路径配置，避免不同依赖的路径规则冲突。

发布包前编译时就把绝对路径转换为相对路径，完全不需要上层项目做任何修改：

• 搭配typescript-transform-paths插件实现编译时自动转换路径，在你的包的tsconfig.json中新增配置：

{
  "compilerOptions": {
    // 你原来的其他配置不变
    "plugins": [
      { "transform": "typescript-transform-paths" }
    ]
  }
}

编译时使用ttypescript替代原生tsc执行编译即可，输出的JS代码中所有src/xxx的绝对路径都会自动替换为对应相对路径。

• 如果你的包是用rollup、tsup等工具打包的，直接在打包工具中配置路径别名转换规则即可，效果和上面的方案一致。

如果暂时不想修改包的代码，可以在上层应用的Webpack配置中单独给该依赖加别名：

const path = require('path');

module.exports = {
  // 其他配置不变
  resolve: {
    alias: {
      // 把该包内的src路径映射到node_modules下对应目录
      'src': path.resolve(__dirname, 'node_modules/你的包名/src')
    }
  }
}

这个方案存在别名冲突风险：如果上层项目自身也用了src/xxx的绝对路径引用，会和该别名冲突，仅适合临时调试使用。

不建议尝试配置tsconfig-paths-webpack-plugin读取node_modules下的tsconfig，一方面会大幅拖慢构建速度，另一方面如果多个依赖都配置了baseUrl，会出现路径覆盖的问题，排查成本极高。

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