Babel 做了什么
Babel 是 JavaScript 编译器：把新语法（箭头函数、可选链、空值合并等）翻译成旧浏览器能运行的等价代码。它的输入是新版 JS，输出是“目标浏览器普遍支持”的旧版 JS。
原理分三步：把源码解析成 AST（抽象语法树）→ 遍历树做节点替换 → 重新生成代码。插件（plugin）定义“遇到什么节点怎么改”，预设（preset）是插件集合——@babel/preset-env 按目标浏览器自动挑选需要的插件。
- Babel 只转语法（箭头函数 → function），不补 API（Promise.includes 等要 polyfill）
- preset-env + targets：告诉它“要兼容哪些浏览器”，它自动选插件
- 现代框架的底层都是 AST：Babel、ESLint、Prettier、TypeScript 同源
编译
// 源码（现代语法） const name = obj?.name ?? '匿名'; const sum = (a, b) => a + b; // Babel 编译后（ES5 等价代码） var name = obj === null || obj === void 0 ? void 0 : obj.name; if (name === null || name === void 0) name = '匿名'; var sum = function (a, b) { return a + b; }; // babel.config.js —— 最常见配置（JS 文件可写注释） module.exports = { presets: [ ['@babel/preset-env', { targets: { chrome: '60', safari: '12' }, // 目标浏览器 useBuiltIns: 'usage', // 按需注入 polyfill corejs: 3, }], ], };
本节要点Babel 把新语法编译成旧语法；语法转换靠插件，目标兼容靠 targets 驱动 preset-env。
