如何配置Babel env preset在Node环境下保留ES6模块语法

在@babel/preset-env的配置项中显式添加"modules": false，即可强制Babel保留原生import/export语法，不对模块规范做转换。

修改后的完整配置：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "16"
        },
        "modules": false
      }
    ]
  ]
}

为什么"esmodules": true搭配"node": "16"不生效 #

targets.esmodules: true的作用是标记目标环境原生支持ES模块，供Babel调整其他语法的兼容降级规则，本身不会强制关闭模块语法转换逻辑。
Node.js 16 同时支持CommonJS和ES模块两种规范，当你显式指定node: "16"作为编译目标时，@babel/preset-env默认会将ES模块转换为CommonJS格式，仅添加esmodules: true无法覆盖这个默认行为，必须显式设置modules: false才能关闭模块转换。

配置效果 #

设置modules: false后：

• Babel会按照Node 16的兼容要求转换其他高版本ES语法，完全保留import/export的原生ESM写法
• 编译产物可以直接保存为.mjs后缀在Node.js 16环境下运行
• 如果项目根目录package.json中设置了"type": "module"，编译后的.js文件也可以直接作为ES模块运行
• 该配置也更适配后续搭配Rollup、Webpack等构建工具的场景，方便构建工具做Tree Shaking优化

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