TypeScript自定义路径问题：tsc构建后模块无法找到

TypeScript的paths配置仅用于IDE语法提示和TypeScript编译阶段的类型校验，tsc本身不会将自定义路径转换为运行时可识别的相对路径，所以构建后的JS文件仍保留原自定义路径，导致运行时模块查找失败。

以下是几种适配不同场景的实用解决方案：

方法1：使用tsc-alias（纯tsc构建项目首选） #

1. 安装依赖：

npm install tsc-alias --save-dev

2. 确保tsconfig.json的baseUrl和paths配置正确，示例：

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

3. 修改package.json的构建脚本，在tsc编译后追加路径转换步骤：

"scripts": {
  "build": "tsc && tsc-alias"
}

执行npm run build后，生成的JS文件中自定义路径会被自动替换为对应相对路径。

方法2：用typescript-transform-paths配合ts-patch（修改tsc原生编译行为） #

该方案让tsc在编译阶段直接完成路径转换，无需额外后续步骤：

1. 安装依赖：

npm install typescript-transform-paths ts-patch --save-dev

2. 初始化ts-patch，它会修改本地TypeScript编译器的行为：

npx ts-patch install

3. 在tsconfig.json中添加插件配置：

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    },
    "plugins": [
      { "transform": "typescript-transform-paths" }
    ]
  }
}

4. 直接运行tsc编译即可，生成的JS文件路径已完成转换。

方法3：webpack打包场景适配 #

若项目使用webpack打包，可通过插件让webpack识别自定义路径：

1. 安装依赖：

npm install tsconfig-paths-webpack-plugin --save-dev

2. 在webpack配置文件中引入并启用插件：

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  // ...其他webpack配置
  resolve: {
    plugins: [new TsconfigPathsPlugin()]
  }
};

webpack打包时会自动解析自定义路径，生成符合运行要求的打包产物。

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