Babel 是将新语法转译为旧版浏览器兼容代码的工具，通过解析→转换→生成三步处理AST，并按目标环境自动启用插件或注入 polyfill。
JavaScript 需要转译器（如 Babel），根本原因是浏览器对新语法的支持总是滞后的。你写的 const、箭头函数、可选链（?.）、装饰器甚至 TypeScript，很多在旧版 Chrome 或 Safari 里直接报错——Babel 就是把“未来”的 JS 翻译成“现在”能跑的 JS。
为什么不能等浏览器全支持再写新语法？
实际开发中没法等：团队要迭代、项目要上线、用户用着各种版本的浏览器（尤其企业内网还跑 IE11）。不转译，要么放弃新特性带来的简洁和安全，要么主动放弃大量用户。Babel 提供了“写得现代，跑得广泛”的折中方案。
Babel 怎么把新代码变成老代码？
它不是简单替换字符串，而是走标准三步：解析（Parse）→ 转换（Transform）→ 生成（Generate）。
-
解析：把源码转成抽象语法树（AST），比如
const fn = () => 42会被拆解成“声明类型”“函数名”“箭头函数节点”等结构化对象 -
转换：遍历 AST，按规则修改节点。例如把箭头函数节点替换成
function表达式，把const换成var（配合作用域分析避免冲突） - 生成：把改完的 AST 重新拼成字符串代码，同时保留原始格式（缩进、换行）和 sourcemap 映射
它不只转语法，还处理运行时行为
像 Array.prototype.includes 或 Promise 这类新 API，Babel 不会重写调用语句（那是 polyfill 的事），但会配合 @babel/preset-env 自动判断目标环境是否缺失，并建议引入对应 polyfill。你写 [1,2].includes(2)，Babel
可能啥也不动（Chrome 50+ 原生支持），也可能帮你加一行 import 'core-js/stable/array/includes'。
配置决定它转什么、怎么转
关键靠 .babelrc 或 babel.config.js：
-
preset-env：根据targets（如{"chrome": "58"}）自动启用所需插件，不用手动列一堆 -
plugin-proposal-decorators：单独开启实验性语法（如@connect） -
plugin-transform-runtime：避免重复注入 helper 函数（如_classCallCheck），减小包体积
基本上就这些。Babel 不复杂，但容易忽略它的“按需编译”逻辑——它不是越新越好，而是越准越好。
