如何用Babel转译async/await至ES6/5同时保留ES6类？

嘿，作为Babel新手碰到这个问题太正常了！你想要转译async/await这类Chrome 53不支持的语法，同时保留浏览器已经原生支持的ES6类，核心思路就是让Babel只处理目标环境不兼容的语法，别碰已经支持的类。咱们一步步来调整配置：

1. 先安装必要的依赖 #

先把Babel的现代工具链装好，替换掉旧的全量babel-polyfill方案（新方案更高效）：

npm install @babel/core @babel/preset-env babel-loader @babel/plugin-transform-runtime core-js@3 --save-dev

2. 修改Webpack配置，精准控制转译规则 #

你之前的Webpack配置里module部分没写完，咱们补全并添加Babel的精准配置，重点是告诉Babel：目标浏览器是Chrome 53，绝对不要转译ES6类。

完整的Webpack配置如下：

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: ['./src/entry.js'], // 用按需polyfill后不需要手动引入babel-polyfill了
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'app.bundle.js',
    library:'bundle',
    libraryTarget:'umd'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: {
                  chrome: '53' // 明确指定要支持的Chrome版本
                },
                useBuiltIns: 'usage', // 按需加载polyfill，避免全量引入
                corejs: 3, // 对应安装的core-js版本
                exclude: ['transform-classes'] // 强制排除转译ES6类的插件
              }]
            ],
            plugins: [
              '@babel/plugin-transform-runtime' // 优化async/await转译，减少重复代码
            ]
          }
        }
      }
    ]
  }
};

3. 关键配置的作用说明 #

• targets.chrome: '53'：Babel会自动查询Chrome 53支持的ES6特性清单，只转译它不兼容的语法（比如async/await），原生支持的ES6类会完全保留。
• exclude: ['transform-classes']：双重保险，哪怕@babel/preset-env默认包含转译类的插件，也会被强制排除，确保类始终是原生class写法。
• useBuiltIns: 'usage'：代替手动在entry里加babel-polyfill，Babel会自动在需要的代码位置引入对应polyfill，大幅减少打包体积。

4. 验证效果 #

打包后打开app.bundle.js，搜索你的ES6类，应该能看到原生的class关键字；而async/await会被转译成基于Promise或Generator的兼容代码——这样既满足了Chrome 53的兼容性，又保留了原生类的性能和写法。

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