TypeScript 4.4.4中tsconfig paths配置编译后无法解析如何解决

问题根因 #

TypeScript 中的 paths 配置仅作用于类型检查阶段和IDE智能提示，原生tsc编译工具不会自动将别名替换为实际的相对路径。因此编译后的JS代码仍然保留@开头的导入语句，Node.js运行时无法识别这类非标准路径，就会抛出模块不存在的错误。

解决方法 #

方案1：编译时直接替换别名（无运行时依赖，生产环境推荐） #

使用tsc-alias工具在tsc编译完成后自动替换所有别名路径为正确的相对路径：

1. 安装开发依赖：

npm i --save-dev tsc-alias

2. 修改编译命令，在tsc执行完成后追加tsc-alias执行逻辑：

tsc --project tsconfig.json && tsc-alias -p tsconfig.json

编译后的JS代码会自动把require("@config")这类语句替换为对应的相对路径，直接运行即可。

方案2：运行时加载别名解析（适合开发环境快速使用） #

使用tsconfig-paths工具在代码运行时动态解析别名：

1. 安装依赖：

npm i tsconfig-paths

2. 运行编译后代码时增加注册参数：

node -r tsconfig-paths/register dist/index.js

如果是开发环境用ts-node直接运行TS代码，可直接使用命令：

ts-node -r tsconfig-paths/register src/index.ts

方案3：配合打包工具配置别名 #

如果项目使用webpack、rollup、esbuild等打包工具，直接在打包工具中配置别名即可，不需要额外依赖TS侧的路径替换逻辑：

• webpack：在webpack.config.js的resolve.alias中添加对应别名映射
• rollup：使用@rollup/plugin-alias插件配置别名
• esbuild：在构建配置的alias字段中添加映射

方案4：使用Node.js模块别名 #

通过module-alias包在运行时处理路径映射：

1. 安装生产依赖：

npm i module-alias

2. 在package.json中添加别名配置：

{
  "_moduleAliases": {
    "@": "dist",
    "@config": "dist/config"
  }
}

3. 在项目入口JS文件的第一行引入注册逻辑：

require('module-alias/register');

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