如何通过Babel将TS转译为ESM并自动补全import的.js文件后缀

Babel 原生预设没有提供自动补全 ESM 导入路径后缀的能力，你可以通过安装第三方 Babel 插件实现该需求，具体操作如下：

这是目前适配性最高的解决方案，不需要改动原有源码的导入写法，会在编译阶段自动给输出文件的导入路径补全后缀。

安装依赖 #

执行以下命令安装开发依赖：

npm install babel-plugin-add-import-extension --save-dev
# 或使用 yarn
yarn add babel-plugin-add-import-extension -D
# 或使用 pnpm
pnpm add babel-plugin-add-import-extension -D

修改 Babel 配置 #

更新你的 babel 配置文件，添加对应插件配置：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        },
        "modules": false
      }
    ],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "babel-plugin-add-import-extension",
      {
        // 指定要添加的导入后缀
        "extension": "js",
        // 开启后会自动将源码中的 .ts/.tsx 后缀替换为输出对应的 .js/.jsx
        "replace": true
      }
    ]
  ]
}

配置完成后重新执行构建，输出文件的导入语句就会自动带上.js后缀，符合ESM规范要求。

如果你不需要依赖Babel的特殊转译能力，也可以直接用TypeScript官方编译器(tsc)输出符合规范的ESM文件，只需在tsconfig.json中添加以下配置：

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "target": "ESNext",
    "outDir": "./dist"
  }
}

使用该方案需要注意：你需要在源码的相对导入语句中直接写.js后缀，TypeScript会自动匹配对应的.ts/.tsx源文件做类型检查，转译后会保留.js后缀，完全符合ESM规范。

• 如果你的项目需要输出.jsx后缀的React组件文件，可以修改插件的extension配置为jsx，或者配置extMapping参数自定义不同源文件后缀的输出映射规则。
• 配置完成后建议抽样检查输出文件的导入路径，确认适配你的项目目录结构。

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