如何配置Babel使其不编译浏览器已原生支持的类属性与私有方法

你遇到的转译异常主要是两个原因导致的：

1. 你引入了已经废弃的stage-2预设，这类stage预设不受@babel/preset-env的目标浏览器配置约束，会强制开启所有类字段、私有方法相关的转译插件，不管目标浏览器是否原生支持。
2. 旧版本的装饰器插件默认会触发全量类字段转译，不支持仅转译带装饰器的属性。

正确配置步骤 #

1. 移除所有废弃预设
   删掉项目中所有stage-0/stage-1/stage-2/stage-3这类预设，这类预设早已停止维护，会强制覆盖@babel/preset-env的兼容逻辑。

2. 仅保留@babel/preset-env并正确配置targets
   你的Babel配置示例如下（以babel.config.json为例）：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "94",
          "firefox": "93"
        },
        "useBuiltIns": false
      }
    ]
  ],
  "plugins": []
}

该配置下Babel会自动匹配目标浏览器支持的特性，不会对原生支持的类字段、私有方法做任何转译。

3. 如果使用装饰器的特殊配置
   如果你需要用到装饰器特性，需要单独配置装饰器插件，避免触发全量类字段转译：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "94",
          "firefox": "93"
        }
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "version": "2023-05"
      }
    ]
  ]
}

该配置下只会转译带装饰器的属性，不会处理其他普通类字段、私有方法，完全保留原生特性。

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