在TypeScript中使用file-loader：如何让编辑器检测无效图片导入？

我已经通过esbuild为.png文件配置了file loader，并在index.d.ts中添加了如下类型声明：

declare module "*.png" {
  const value: string;
  export default value;
}

但存在一个问题：编辑器不会对不存在的图片导入给出警告，例如：

import existing from "assets/existing.png" // 无错误
import not_existing from "assets/not_existing.png" // 无错误

只有在执行esbuild构建时才会报错，请问有没有更优的解决方法？

1. TypeScript项目：用ts-resolve-files实时检查 #

如果你的项目基于TypeScript，这个工具能让TS语言服务在编辑器内直接校验静态资源路径的存在性：

• 安装依赖：

npm install ts-resolve-files --save-dev

• 修改tsconfig.json，添加插件配置：

{
  "compilerOptions": {
    "plugins": [{"name": "ts-resolve-files"}]
  }
}

配置完成后，VS Code会实时提示不存在的图片导入错误，无需等到构建阶段。

2. 用ESLint规则做路径校验 #

借助eslint-plugin-import的规则结合路径解析器，实现编辑器内的即时校验：

• 安装依赖：

npm install eslint-plugin-import eslint-import-resolver-typescript --save-dev

• 在.eslintrc.js中配置规则和解析器：

module.exports = {
  plugins: ['import'],
  rules: {
    'import/no-unresolved': ['error', { commonjs: true, amd: true }]
  },
  settings: {
    'import/resolver': {
      typescript: {},
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.png']
      }
    }
  }
};

ESLint会在编辑器中即时标记不存在的图片导入。

3. 开发阶段添加实时构建检查脚本 #

用文件监听工具在代码修改时自动触发esbuild的轻量检查，快速反馈路径错误：

• 安装依赖：

npm install chokidar --save-dev

• 在package.json中添加开发检查脚本：

{
  "scripts": {
    "dev:check": "chokidar 'src/**/*.{ts,tsx,js,jsx}' -c 'esbuild src/index.ts --bundle --outfile=dist/temp.js --log-level=error'"
  }
}

启动该脚本后，每次修改代码都会自动执行esbuild检查，及时发现路径问题。

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