切换至ESNext模块后TS文件无扩展名导入失败的解决方案咨询

方案1：调整tsconfig.json核心配置 #

在compilerOptions中补充以下配置，让TypeScript适配ES模块的解析逻辑，同时支持无扩展名导入：

{
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    "moduleResolution": "bundler", // 适配Vite、Webpack等打包工具的场景
    // 若需严格对齐Node.js ES模块规则，改用"node16"或"nodenext"
    "resolveExtensions": [".ts", ".js", ".json"],
    "esModuleInterop": true,
    "resolveJsonModule": true
  }
}

• moduleResolution: "bundler"：适合依赖打包工具的项目，这类工具本身支持无扩展名导入逻辑
• node16/nodenext：严格遵循Node.js的ES模块解析规范，TypeScript会自动在编译时将导入路径转换为带.js扩展名的格式，满足Node的要求

方案2：启用Node.js实验性解析特性（直接运行编译后的JS） #

如果是直接用Node执行编译后的JS文件，可通过启动参数让Node支持无扩展名的ES模块导入：

node --experimental-specifier-resolution=node dist/getButton.js

该参数会让Node自动尝试补全文件扩展名，行为类似CommonJS模块的解析逻辑，但注意这是实验性特性，后续可能有调整。

方案3：使用TS运行时工具（直接运行TS文件） #

如果需要直接运行TS文件而非编译后的JS，可换用tsx工具，它默认支持无扩展名的TS导入：

tsx src/getButton.ts

若坚持使用ts-node，需在tsconfig.json中添加ts-node专属配置：

{
  "ts-node": {
    "esm": true,
    "experimentalSpecifierResolution": "node"
  },
  "compilerOptions": {
    // 保留原有配置
  }
}

方案4：允许导入带.ts扩展名（可选） #

若需要部分导入带.ts扩展名的文件，可在tsconfig.json中开启对应配置，适合开发阶段无需手动编译的场景：

{
  "compilerOptions": {
    "allowImportingTsExtensions": true,
    "noEmit": true // 避免编译时生成带.ts扩展名的错误导入路径
  }
}

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