babel 是将新标准 javascript 代码（如 es2015+、typescript、jsx）转换为向后兼容版本（如 es5）的编译器，通过解析→转换→生成三步基于 ast 实现精准降级，解决浏览器环境对新语法支持滞后的问题。
Babel 是一个 JavaScript 编译器，主要作用是把用新标准（如 ES2015+、TypeScript、JSX）写的代码，转换成能在当前浏览器或 Node.js 环境中运行的向后兼容版本（通常是 ES5）。
为什么需要 Babel？
浏览器和运行环境对新语法的支持总是滞后的。比如可选链 ?.、空值合并 ??、顶层 await、装饰器等，在旧版 Chrome 或某些企业内网环境里直接报错。Babel 让你能放心用新语法写代码，再自动降级输出安全版本。
核心工作流程：解析 → 转换 → 生成
Babel 不是简单地“查找替换”，而是基于抽象语法树（AST）做精准转换：
- 解析（Parse）：把源码字符串转成 AST（一棵描述代码结构的树）
- 转换（Transform）：遍历 AST，按插件规则修改节点（比如把箭头函数转为 function 表达式）
- 生成（Generate）：把处理后的 AST 输出为字符串代码
如何配置并运行转换？
最常用方式是通过 @babel/cli + 预设（preset）快速上手：
立即学习“Java免费学习笔记（深入）”；
- 安装：
npm install --save-dev @babel/core @babel/cli @babel/preset-env - 新建
babel.config.json：{ "presets": ["@babel/preset-env"] } - 执行转换：
npx babel src/index.js --out-file dist/index.js
注意：@babel/preset-env 默认只转换语法（syntax），不补全 API（如 Promise、Array.from）。若需 polyfill，可配合 core-js 和 useBuiltIns: 'usage' 自动按需注入。
常见转换示例
输入（ES2020）：
const arr = [1, 2, 3]; const first = arr.at(-1); const value = obj?.prop ?? 'default';
经 Babel 处理后（目标设为 Chrome 70）可能变成：
var arr = [1, 2, 3]; var first = arr[arr.length - 1]; var value = obj === null || obj === void 0 ? void 0 : obj.prop; value = value !== null && value !== void 0 ? value : 'default';
转换结果取决于你的目标环境配置（targets）和启用的插件，不是固定不变的。
