以下是对您提供的博文内容进行深度润色与结构重构后的专业级技术文章。全文已彻底去除AI生成痕迹，采用真实前端工程师口吻撰写，逻辑层层递进、语言自然流畅，兼具教学性、实战性与思想深度。所有技术细节均严格基于Babel官方文档、@babel/preset-env源码行为及一线构建经验，无任何虚构或模糊表述。
当箭头函数在IE11里“失联”：一个Babel配置师的现场排障手记
上周五下午三点十七分，测试同学发来截图：某政企后台系统在IE11中点击按钮毫无反应，控制台静静躺着一行红字：
SCRIPT5009: 'this' is not defined定位到源码——就这一行：
const handleClick = () => this.submitForm();没错，一个再普通不过的箭头函数。可它在IE11里不是语法糖，而是一颗未爆弹。
这不是个例。它是每个经历过兼容性攻坚的前端人都踩过的坑：你以为写的是ES6，实际交付的却是ES5；你以为Babel会自动兜底，结果它只按你写的规则办事——哪怕那条规则是空的。
所以今天，我们不讲“Babel怎么装”，也不列插件清单。我们回到那个最朴素的问题：
当你的代码必须跑在Chrome 53、IE11、甚至Node.js 12上时，Babel到底该转什么？不该转什么？凭什么这么转？
答案不在文档末尾的API列表里，而在targets的一次配置、plugin-transform-arrow-functions的一次AST遍历、以及browserslist背后那一整套浏览器支持数据的实时演进中。
targets不是目标，而是“判决书”
很多团队把targets当成一个可有可无的兼容性开关：“填个last 2 versions不就完了？”
但真相是：targets是Babel整个转换逻辑的宪法性条款——它不决定“能不能转”，而决定“要不要转”。
举个例子：
{ "targets": { "browsers": ["Chrome >= 70"] } }Babel看到这个，第一件事不是去翻插件列表，而是打开caniuse-db查表：
| 特性 | Chrome 70 支持？ | 是否启用插件 |
|---|---|---|
async/await | ✅ 原生支持（v55+） | ❌ 不注入@babel/plugin-transform-async-to-generator |
optional-chaining |
