Babel 是一个基于 AST 的 JavaScript 编译器，将 ES2015+、JSX 等新语法转换为向后兼容的 ES5 代码；其工作流程为解析→转换→生成，需配合 @babel/preset-env 和 core-js 实现语法转换与 polyfill 注入。
Babel 是一个 JavaScript 编译器，主要作用是把用新标准写的代码（比如 ES2015+、JSX、TypeScript）转换成能在旧版浏览器或环境中运行的向后兼容的 JavaScript 代码（通常是 ES5）。
为什么需要 Babel
浏览器对新语法的支持有延迟，比如可选链 ?.、空值合并 ??、顶层 await、装饰器等，在老版本 Chrome 或 IE 中直接运行会报错。Babel 在构建阶段提前做转换，让开发者能放心用新特性，又不牺牲兼容性。
核心工作流程：解析 → 转换 → 生成
Babel 不是简单地“字符串替换”，而是基于 AST（抽象语法树）工作的：
- 解析（Parse）：把源代码转成 AST（一种结构化对象）
- 转换（Transform）：遍历 AST，根据插件规则修改节点（如把箭头函数转为 function 表达式）
- 生成（Generate）：把修改后的 AST 打包成目标字符串代码
如何配置并使用 Babel
最常用方式是配合构建工具（如 Webpack、Vite、Rollup），也可以命令行单独使用：
立即学习“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）。需搭配 core-js 和 useBuiltIns: 'usage' 才能自动注入缺失的 polyfill。
常见转换示例
输入（ES2020）：
const arr = [1, 2, 3]; const first = arr.at(-1); const value = obj?.user?.name ?? 'Anonymous';
经 Babel + preset-env 处理后可能变成（ES5 风格）：
var arr = [1, 2, 3]; var first = arr[arr.length - 1]; var value = obj === null || obj === void 0 ? void 0 : (obj.user === null || obj.user === void 0 ? void 0 : obj.user.name) !== null && obj.user.name !== void 0 ? obj.user.name : 'Anonymous';
实际输出取决于你的 targets 配置（如 {"chrome": "58"}），Babel 会按需精简转换内容，避免冗余。
