webpack中用esbuild-loader替代ts-loader时，如何解决.d.ts文件引用错误？

问题根源 #

esbuild本身不处理TypeScript的类型系统，它会把你对.d.ts文件的import语句当成普通JS模块去解析，但这类类型声明文件不会被编译成可执行代码，自然找不到对应的模块，所以报错。

解决办法 #

不需要移除任何.d.ts文件，只需要调整代码和配置即可：

• 移除对.d.ts文件的手动import
  TypeScript会自动扫描项目中符合tsconfig.json里include规则的.d.ts文件，不需要手动import类型/接口。比如你原来的代码：

  import { SomeInterfaces } from "../../../../../../../modules/something/interfaces";
  

  直接删掉这条import语句，SomeInterfaces类型依然能被TS识别——因为TS已经从对应的.d.ts文件里读取了类型定义，esbuild也不会再尝试解析这个不存在的模块。

• 配置tsconfig.json优化类型查找（可选）
  如果项目里的类型文件路径太深，或者想统一类型文件的查找规则，可以在tsconfig.json里配置paths，帮TS快速定位类型文件：

  {
    "compilerOptions": {
      "baseUrl": "./src",
      "paths": {
        "@interfaces/*": ["modules/something/interfaces/*"]
      }
    },
    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"]
  }
  

  确保include包含所有.d.ts文件，TS就能自动识别所有类型定义，完全不需要手动import。

• 保留类型检查（可选）
  因为esbuild跳过了类型检查，如果你想确保代码类型正确，可以在构建流程里加入TS的类型检查：

  1. 最简单的方式是在package.json的构建脚本里先执行tsc --noEmit：

     "scripts": {
       "build": "tsc --noEmit && webpack",
       "dev": "tsc --noEmit && webpack serve"
     }
     

  2. 或者用fork-ts-checker-webpack-plugin，让webpack在构建时并行执行类型检查，不拖慢构建速度：
     安装插件后，在webpack.config.js里配置：

     const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
     
     module.exports = {
       // ...其他配置
       plugins: [new ForkTsCheckerWebpackPlugin()]
     };
     

现有esbuild-loader配置无需修改 #

你当前的esbuild-loader配置是正常的，只要完成上面的代码调整，就能解决模块找不到的问题，同时享受esbuild带来的构建速度提升。

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