TypeScript如何非相对路径导入config文件解决模块找不到报错

出现Cannot find module 'config'报错的核心原因是：TypeScript默认会将不带路径前缀的导入包名解析为node_modules下的第三方依赖，不会主动映射到本地编写的config.ts文件；同时tsconfig.json里的路径映射仅在类型检查阶段生效，不会自动修改编译后/运行时的导入路径，需要额外配置运行环境/打包工具的路径解析规则。

1. 基础配置：修改tsconfig.json #

首先配置TS的路径映射，同时开启必要的编译选项适配标准import写法：

{
  "compilerOptions": {
    // 配置源码根目录，根据项目实际结构调整，若config.ts在项目根目录就写"./"
    "baseUrl": "./src",
    "paths": {
      // 将"config"导入映射到本地config.ts文件，路径为相对于baseUrl的地址
      "config": ["./config.ts"]
    },
    // 必须开启，否则不支持export = 语法配合import from的默认导入写法
    "esModuleInterop": true,
    // 必须配置为node/NodeNext，路径映射规则才会生效
    "moduleResolution": "node"
  }
}

如果不想开启esModuleInterop，可以直接把config.ts的导出改成标准ESModule写法，原生适配TS的import语法：

// config.ts
export default {
  var1: "hrqedfc",
  var2: "gbrdf"
}

2. 适配运行/打包环境 #

TS的路径映射不会自动处理运行时的路径解析，需要根据项目运行方式补充配置：

• 场景A：直接用ts-node运行/tsc编译后运行Node项目
  1. 安装路径解析依赖：npm i -D tsconfig-paths tsc-alias
  2. 开发阶段用ts-node启动时，加载路径解析注册脚本：ts-node -r tsconfig-paths/register app.ts
  3. 生产编译时，在package.json中添加编译脚本，自动替换编译后文件中的别名路径为可识别的相对路径：

  {
    "scripts": {
      "build": "tsc && tsc-alias",
      "start": "node dist/app.js"
    }
  }
  

• 场景B：使用Vite/Webpack/Rollup等打包工具构建项目
  直接在打包工具配置中添加同名别名映射即可，打包工具会自动完成路径替换，无需额外安装路径解析依赖。以Vite为例：

  // vite.config.ts
  import { defineConfig } from 'vite'
  import path from 'path'
  
  export default defineConfig({
    resolve: {
      alias: {
        // 映射到config.ts的实际绝对路径，根据项目结构调整
        'config': path.resolve(__dirname, 'src/config.ts')
      }
    }
  })
  

• 不建议给本地文件起和npm公共包同名的别名，config本身是已发布的npm包名，后续如果安装同名依赖会出现路径冲突，更稳妥的写法是加自定义前缀，比如@/config。
• 所有路径配置需要和实际项目目录结构保持一致，配置后重启TS服务/开发服务即可生效。

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