@babel/preset-env未转译ES6 Class问题求助

我之前也碰到过类似的困扰，咱们一步步来排查可能的原因：

1. 先确认核心依赖是否完整安装 #

有时候只装了@babel/preset-env却漏掉了Babel核心库，会导致转译逻辑压根跑不起来。先执行以下命令确保依赖齐全：

npm install --save-dev @babel/core @babel/preset-env

2. 检查targets配置是否触发Class转译 #

你的配置里指定了ie > 9（即IE10及以上），而IE10本身是不支持ES6 Class的，理论上@babel/preset-env应该会自动转译。不过可以先通过强制转译来验证是不是目标浏览器的判断逻辑问题：
修改你的.babelrc，添加forceAllTransforms: true强制转译所有ES2015+特性：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [ "last 2 versions", "safari > 7", "ie > 9" ]
        },
        "forceAllTransforms": true
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

如果修改后Class能被转译，说明之前的targets配置里，部分浏览器的支持判断让preset-env跳过了Class转译。

3. 排查是否有Browserslist配置覆盖 #

如果你的项目里存在.browserslistrc文件，或者package.json里有browserslist字段，它会直接覆盖.babelrc里的targets.browsers配置。比如如果.browserslistrc里只写了last 2 versions，很多现代浏览器已经原生支持Class，就会导致preset-env不转译。可以暂时删除这个文件或者注释掉相关配置，再测试转译效果。

4. 验证Babel的执行逻辑是否正确 #

• 如果用babel-cli直接转译：确保命令路径和输出目录正确，比如：

npx babel src --out-dir dist

• 如果用webpack配合babel-loader：检查webpack配置是否正确引入了loader，并且排除了node_modules：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

同时别忘了安装babel-loader：

npm install --save-dev babel-loader

5. 测试最简Class代码 #

有时候复杂的Class语法（比如私有字段、装饰器）可能会干扰转译逻辑，先写一段最基础的Class代码测试：

class Demo {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

用Babel转译后看看是否生成了ES5的构造函数形式，如果这段最简代码能转译，再逐步排查你原有Class的语法问题。

如果以上方法都试过还是没解决，可以把转译前后的代码片段贴出来，或者补充更多项目配置细节，这样更容易定位问题~

内容的提问来源于stack exchange，提问作者s-leg3ndz