如何配置Babel以适配ES2021目标环境？

核心问题原因 #

你遇到的async/await被强制转译的问题，根源在于配置了fast-async插件——这个插件会无视目标浏览器的支持情况，直接把async/await转译为基于Promise的代码。另外，部分手动添加的插件其实已经被@babel/preset-env覆盖，属于冗余配置。

具体修改步骤 #

1. 移除fast-async插件 #

直接删掉babel.config.js中plugins数组里的["module:fast-async", { "spec": true }]，同时在package.json的devDependencies中移除fast-async依赖。

2. 调整@babel/preset-env配置 #

你可以选择两种方式指定目标，效果一致：

• 方式一：直接指定目标为ES2021
• 方式二：保留chrome:97（Chrome97原生支持所有ES2021特性）

@babel/preset-env会自动检测目标环境支持的特性，只转译不支持的部分。

3. 移除冗余插件 #

以下插件不需要手动添加，@babel/preset-env会根据目标环境自动处理：

• @babel/plugin-proposal-class-properties
• @babel/plugin-proposal-object-rest-spread
• @babel/plugin-transform-object-assign

修改后的babel.config.js #

module.exports = function (api) {
    api.cache(true);
    return {
        presets: [
            "@babel/preset-react",
            [
                "@babel/preset-env",
                {
                    useBuiltIns: "entry",
                    corejs: "3.25", // 匹配你安装的core-js版本
                    targets: "es2021", // 直接指定ES2021目标，或保留chrome:97
                    modules: false
                }
            ]
        ],
        plugins: [
            ["@babel/plugin-transform-react-jsx", {
                throwIfNamespace: false,
                runtime: "automatic"
            }]
        ]
    }
}

清理package.json中的冗余依赖 #

从devDependencies中移除以下包：

• fast-async
• @babel/plugin-proposal-class-properties
• @babel/plugin-proposal-object-rest-spread
• @babel/plugin-transform-object-assign

验证效果 #

修改完成后重新构建项目，async/await会保留原生语法，??（空值合并运算符）和?.（可选链运算符）也会直接保留——因为Chrome97完全支持这些ES2021特性，Babel不会对其进行转译。

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