Babel配置中设置targets时，为什么指定了浏览器版本却没转译某些语法？

当时我也卡在这，以为 Chrome 90 不支持箭头函数，结果一查文档才发现 Chrome 45 就已经支持了，根本不需要转译。

Babel 的 preset-env 默认是按 目标浏览器的最低需求 来决定要不要转译的，也就是说：如果目标浏览器 原生支持 某个语法，它就不会转译。Chrome 90 完全支持箭头函数、let/const、class 等 ES6+ 特性，所以 Babel 就直接放过去了，这是正常行为，不是配置错了。

你用 Chrome 80 测试时会报错，那可能是因为你实际用的浏览器版本不是 80，或者测试方式有问题（比如没清理缓存、没重新构建、或者用的不是真实环境）。建议你用 browserlist 工具或者直接在 Chrome 80 实机上跑一下看看。

如果你想强制让某些语法被转译（比如做兼容性兜底），可以在 preset-env 里加 forceAllTransforms: true，或者用 useBuiltIns: "usage" + corejs 来自动引入 polyfill，但正常情况下不需要这么做。

正确的配置其实你已经写对了，只是理解偏差。验证方法很简单：你把 targets 改成 "chrome": "40"，再 build 一遍，箭头函数立马就变成 function 形式了。

另外推荐用 npx browserslist "chrome 90" 看看具体支持啥特性，或者直接上 [browserslist.dev](https://browserslist.dev) 一查就清楚了。

这个问题的核心在于你对 Babel 的 targets 配置的理解可能有一点偏差，具体来说，targets 的作用是告诉 Babel 你的代码需要兼容的目标环境，但它并不会强制转译所有语法。Babel 只会根据目标环境中是否支持某些语法来决定要不要转译。

先说结论：箭头函数在 Chrome 90 中已经是完全支持的语法，所以 Babel 不会对它进行转译。即使你在测试时用的是 Chrome 80，Babel 并不会因为运行时的环境而改变它的行为，它只依赖你配置的 targets。



解决方案

1. 明确问题的本质
如果你的目标是让代码兼容 Chrome 80，那么需要将 targets 设置为 "chrome": "80"，而不是 "chrome": "90"。Chrome 90 已经原生支持箭头函数，所以 Babel 认为不需要转译这部分语法。

修改后的配置如下：

{

     "presets": ["@babel/preset-env"],

     "targets": {

       "chrome": "80"

     }

   }

2. 检查 Babel 的实际行为
你可以通过安装 @babel/preset-env 提供的调试工具来确认 Babel 是否会转译某些语法。运行以下命令：

npx babel --env-name production --debug

它会输出 Babel 根据当前 targets 决定要转译哪些语法。如果箭头函数没有出现在需要转译的列表中，说明目标浏览器已经支持它。

3. 强制转译特定语法（如果有特殊需求）
如果出于某些原因，你需要强制转译箭头函数（比如为了兼容一些非常特殊的环境），可以使用 include 或 forceAllTransforms 配置。比如：

{

     "presets": [

       ["@babel/preset-env", {

         "targets": {

           "chrome": "90"

         },

         "forceAllTransforms": true

       }]

     ]

   }

这里的 forceAllTransforms 选项会强制 Babel 转译所有语法，不管目标浏览器是否支持。

4. 补充说明 Babel 的工作原理
Babel 的核心是一个语法转换工具，它依赖于 @babel/preset-env 和浏览器兼容性数据（来自 [browserslist](https://github.com/browserslist/browserslist)）。当你设置 targets 时，Babel 会查询这些数据，判断目标浏览器是否支持某些语法特性。如果目标浏览器已经支持某特性，Babel 就会跳过对该特性的转译。

具体到箭头函数，它在 Chrome 45+ 就已经被完全支持了。所以如果你的 targets 是 Chrome 90，Babel 自然不会去动它。

5. 推荐的调试方法
如果你觉得 Babel 的行为不符合预期，可以尝试以下步骤：
- 确认你的 .babelrc 文件被正确加载（可以在文件里加一个无效字段，看看是否报错）。
- 使用 npx browserslist 命令检查你的 targets 是否解析到了正确的浏览器版本范围。
- 检查是否有其他配置覆盖了你的 .babelrc，比如 Webpack 或者其他工具的 Babel 配置。



总结一下

你的问题是 targets 设置得太高，导致 Babel 认为目标浏览器已经支持箭头函数，因此没有转译。解决办法是将 targets 改为 "chrome": "80"，或者使用 forceAllTransforms 强制转译所有语法。调试时可以用 Babel 提供的工具查看实际的转译行为。

最后吐槽一句，Babel 的配置确实有时候让人头大，尤其是涉及到兼容性问题的时候。不过只要理解了它的原理，其实还是挺靠谱的。