Babel 是将新标准 JS 语法（如 ES2020+、JSX、TypeScript）转译为旧版兼容代码（如 ES5）的编译器，不执行代码仅做语法转换；需安装核心包、配置 babel.config.json 指定 targets、添加 build 脚本；扩展支持需额外 preset/plugin，且不处理 polyfill。
Babel 是一个 JavaScript 编译器，核心作用是把**新标准的 JS 语法（如 ES2020+）和特性（如 JSX、TypeScript）转译成当前浏览器或运行环境能理解的旧版本代码（通常是 ES5）**，解决兼容性问题。它不执行代码，只做语法转换，比如把箭头函数 () => {} 变成 function() {}，把可选链 a?.b 变成安全判断逻辑。
为什么需要 Babel
现代 JS 新特性（如 let/const、模块化、装饰器、top-level await）在老版浏览器或某些 Node.js 版本中不被支持。Babel 让你用最新的写法开发，同时保证代码能在目标环境中正常运行。
基础配置三步走
以项目级配置为例（基于 Babel 7+）：
-
安装核心包：
npm install --save-dev @babel/core @babel/cli @babel/preset-env -
创建配置文件
babel.config.json（放在项目根目录）：
{ "presets": [ ["@babel/preset-env", { "targets": { "browsers": ["> 1%", "last 2 versions", "not dead"] } }] ] }这表示：只转译那些在“全球使用率超 1%、主流浏览器最新两版、且未被厂商放弃”的环境中不支持的语法。 -
添加脚本命令到
package.json：
"scripts": { "build": "babel src --out-dir lib --extensions '.js,.jsx'" }运行npm run build就会把src/下的 JS/JSX 文件编译输出到lib/。
按需扩展支持其他语法
默认 @babel/preset-env 只处理标准 JS 语法。如果要用 React、TypeScript 或实验性功能，需额外加 preset 或 plugin：
立即学习“Java免费学习笔记（深入）”；
- React 开发：加
@babel/preset-react，支持 JSX 和 React 17+ 的自动运行时 - TypeScript：加
@babel/preset-typescript（注意：Babel 不做类型检查，TS 类型需靠tsc或 IDE 处理） - 装饰器、私有字段等 Stage 3 提案：启用对应 plugin，例如
@babel/plugin-proposal-decorators，并按规范设置legacy: true或version: "2023-05"
配合构建工具更省心
单独用 CLI 较少，实际项目中常集成到 Webpack、Vite 或 Rollup 中：
- Webpack：配
babel-loader，在module.rules中指定 JS 文件走 Babel 处理 - Vite：默认已内置 Babel 支持（通过 esbuild 预构建 + 按需转译），只需在
babel.config.js中声明 preset 即可生效 - 注意：Babel 不处理 polyfill（如
Promise、Array.from）。需要时用@babel/polyfill（已废弃）或更推荐的core-js+regenerator-runtime手动导入
配置本身不复杂，关键在明确目标环境、合理选择 preset 和 plugin，避免过度转译影响体积和性能。
