TypeScript tsconfig paths路径别名无法解析问题求助

当前别名配置的问题 #

你现在的tsconfig配置不正确，问题出在paths字段的键值对匹配上：

• 你设置的"@utils": ["utils/*"]，意味着@utils会被替换为utils/*，但导入路径@utils/logger/index会被解析成utils/*/logger/index，这和实际目录结构不匹配，导致TS找不到模块。

修正TypeScript别名配置 #

修改tsconfig.json的paths字段，给别名加上通配符，让它能匹配子路径：

{
  "compilerOptions": {
    "baseUrl": "./src",
    "target": "esnext",
    "esModuleInterop": true,
    "downlevelIteration": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "paths": {
      "@utils/*": ["utils/*"]
    }
  },
  "include": ["./src/**/*.ts"]
}

修改后，导入@utils/logger/index会被正确映射到src/utils/logger/index.ts，也可以简化导入路径为@utils/logger（TS会自动识别目录下的index.ts作为入口）。

esbuild构建工具的别名配置 #

esbuild不会自动读取tsconfig的paths配置，需要单独在构建配置中设置别名：

方式1：使用esbuild API配置 #

在你的构建脚本（比如build.js）中添加别名配置：

const esbuild = require('esbuild');

esbuild.build({
  entryPoints: [
    'src/main/index.ts',
    'src/preload/index.ts',
    'src/renderer/index.ts'
  ],
  outdir: 'dist',
  bundle: true,
  platform: 'node', // 按需调整：renderer模块可设为"browser"
  resolve: {
    alias: {
      '@utils': './src/utils'
    }
  }
}).catch(() => process.exit(1));

方式2：使用esbuild命令行参数 #

直接在package.json的scripts中添加命令：

{
  "scripts": {
    "build": "esbuild src/main/index.ts src/preload/index.ts src/renderer/index.ts --outdir=dist --bundle --alias:@utils=./src/utils"
  }
}

注意事项 #

• TS配置负责类型检查阶段的别名解析，esbuild配置负责构建阶段的路径映射，两者都要配置才能同时解决TS错误和构建问题。
• 如果你的项目中有其他别名（比如@main、@renderer），可以用同样的方式分别配置TS的paths和esbuild的resolve.alias。

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