Babel 是将新标准 JS 语法（如 ES2025+、JSX、TypeScript）转译为旧版兼容代码（如 ES5）的编译器，不执行代码仅做语法转换；需安装核心包、配置 babel.config.json 指定 targets、添加 build 脚本；扩展支持需额外 preset/plugin，且不处理 polyfill。

Babel 是一个 JavaScript 编译器，核心作用是把**新标准的 JS 语法（如 ES2025+）和特性（如 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：

• 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: "2025-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，避免过度转译影响体积和性能。