部署至Netlify的应用无法找到无.js扩展名文件的原因排查

核心原因：本地TS解析 vs 浏览器ES模块规则的差异 #

你遇到的问题本质是TypeScript开发阶段的模块解析逻辑和浏览器（Netlify部署后）原生ES模块的解析规则不一致导致的：

1. 本地开发时的TS行为
   你的tsconfig.json里设置了moduleResolution: node，这让TypeScript遵循Node.js的模块解析规则——允许导入时省略扩展名，TS会自动尝试补全.ts、.js等扩展名来查找模块。同时本地开发服务器在处理TS文件时，要么提前做了扩展名补全，要么在运行时帮你处理了路径，所以无扩展名的导入能正常工作。

2. Netlify部署后的浏览器行为
   你配置了module: ES6，TS会把你的代码编译成原生ES模块（输出到public/js目录下的.js文件）。而浏览器加载原生ES模块时，必须指定完整的文件扩展名——浏览器不会像Node.js那样自动尝试补全扩展名。当Netlify的静态服务器收到../utils/validateImage的请求时，找不到对应的文件（实际存在的是validateImage.js），所以返回404错误。

3. 为什么加.js就正常
   当你在TS导入里写.js扩展名时，TS编译后会保留这个扩展名，浏览器请求的就是../utils/validateImage.js，正好对应编译后的文件，所以能正常加载。

解决方法 #

方案1：统一在TS导入中添加.js扩展名 #

这是最直接的解决方式，虽然看起来有点“反直觉”（因为你导入的是.ts文件），但TS现在支持这种写法——它会自动映射到编译后的.js文件。如果TS提示找不到文件，可以在tsconfig.json中补充配置：

"compilerOptions": {
  // 其他配置...
  "allowImportingTsExtensions": false,
  "moduleResolution": "node16" // 或 nodenext，增强ES模块解析支持
}

方案2：调整TS配置，对齐生产环境规则 #

把module改成ESNext，moduleResolution改成node16或nodenext，这样TS会强制你遵循原生ES模块的导入规则，在开发阶段就要求你添加.js扩展名，避免本地和生产环境的不一致：

{
  "compilerOptions": {
    "target": "es6",
    "module": "ESNext",
    "moduleResolution": "node16",
    "outDir": "./public/js",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "sourceRoot": "../src",
    "inlineSourceMap": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": ["**/*.test.ts", "**/*.spec.ts", "tests/"]
}

方案3：使用打包工具处理扩展名 #

如果你引入Webpack、Vite这类打包工具，它们会在打包过程中自动处理模块扩展名的补全，你可以继续用无扩展名的导入，打包后的文件会自动带上正确的扩展名。不过这需要调整你的开发流程，把TS编译交给打包工具处理。

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