Babel #

什么是 Babel？ #

Babel 是一个 JavaScript 编译器，主要用于将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 版本，以便能够在当前和旧版浏览器或其他环境中运行。Babel 是现代 JavaScript 开发工具链中不可或缺的一部分。

Babel 的核心能力 #

能力 说明
语法转换 将 ES6+ 新语法转换为 ES5
Polyfill 注入 为旧环境提供新 API 支持
源码转换 支持 JSX、TypeScript 等转换
插件系统 通过插件扩展编译能力
预设配置 预设组合常用插件

Babel 的优势 #

text 
┌─────────────────────────────────────────────────────────────┐
│                    Babel 的优势                              │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  广泛支持    │  │  插件生态    │  │  高度可定制  │         │
│  │  最新语法    │  │  丰富完善    │  │  灵活配置    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│                                                              │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  社区活跃    │  │  工具集成    │  │  类型支持    │         │
│  │  资源丰富    │  │  无缝对接    │  │  TS/Flow     │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│                                                              │
└─────────────────────────────────────────────────────────────┘

文档结构 #

本指南按以下结构组织，适合初学者按顺序学习：

1. 基础入门 #

主题 描述 文档链接
Babel 简介 Babel 的发展历史、核心概念、应用场景 intro.md
安装与配置 各平台安装配置、环境设置 installation.md
基础使用 命令行操作、API 使用、常见转换 basics.md

2. 配置进阶 #

主题 描述 文档链接
配置详解 配置文件类型、环境配置、覆盖配置 configuration.md
预设详解 preset-env、preset-react、preset-typescript presets.md
插件系统 插件使用、自定义插件、AST 操作 plugins.md

3. 高级特性 #

主题 描述 文档链接
高级特性 AST 深入、自定义转换、性能优化 advanced.md
工具链集成 Webpack、Vite、Rollup、ESLint 集成 toolchain.md

4. 最佳实践 #

主题 描述 文档链接
最佳实践 配置优化、性能提升、常见问题解决 best-practices.md

学习建议 #

初学者路线 #

text 
Babel 简介 → 安装配置 → 基础使用 → 配置详解

进阶路线 #

text 
预设详解 → 插件系统 → 高级特性 → 工具链集成

高级路线 #

text 
自定义插件 → AST 操作 → 性能优化 → 最佳实践

Babel 编译流程 #

text 
┌─────────────────────────────────────────────────────────────┐
│                     Babel 编译流程                           │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌──────────┐    ┌──────────┐    ┌──────────┐              │
│  │ 源代码    │ -> │  解析器   │ -> │   AST    │              │
│  │ (Source) │    │ (Parser) │    │          │              │
│  └──────────┘    └──────────┘    └──────────┘              │
│                                        │                     │
│                                        ▼                     │
│  ┌──────────┐    ┌──────────┐    ┌──────────┐              │
│  │ 输出代码  │ <- │  生成器   │ <- │ 转换插件  │              │
│  │ (Output) │    │(Generator)│    │(Plugins) │              │
│  └──────────┘    └──────────┘    └──────────┘              │
│                                                              │
└─────────────────────────────────────────────────────────────┘

核心概念 #

预设（Preset） #

预设是一组 Babel 插件的集合，用于支持特定的语法特性或场景：

  • @babel/preset-env - 智能环境预设
  • @babel/preset-react - React JSX 支持
  • @babel/preset-typescript - TypeScript 支持

插件（Plugin） #

插件是 Babel 转换代码的核心机制，每个插件负责处理特定的语法特性：

  • 语法转换插件 - 转换现代 JavaScript 语法
  • 提案插件 - 支持尚未进入标准的特性
  • 功能插件 - 提供特定功能

Polyfill #

为旧环境提供新 API 支持，让旧浏览器也能使用最新的 JavaScript 特性。

快速开始 #

安装 #

bash 
npm install --save-dev @babel/core @babel/cli @babel/preset-env

配置 #

javascript 
// babel.config.js
module.exports = {
  presets: ['@babel/preset-env']
};

编译 #

bash 
npx babel src --out-dir dist

应用场景 #

Web 应用开发 #

javascript 
// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: '> 0.25%, not dead',
      useBuiltIns: 'usage',
      corejs: 3
    }],
    '@babel/preset-react'
  ]
};

Node.js 开发 #

javascript 
// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: { node: 'current' }
    }]
  ]
};

库开发 #

javascript 
// babel.config.js
module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    '@babel/plugin-transform-runtime'
  ]
};

与其他工具对比 #

Babel vs SWC #

特性 Babel SWC
语言 JavaScript Rust
速度 中等 极快
生态 成熟 发展中
插件 丰富 较少
配置 灵活 简单

Babel vs esbuild #

特性 Babel esbuild
定位 编译器 打包器
速度 中等 极快
转换能力 强大 基础
插件生态 丰富 发展中

学习资源 #

开始学习 #

准备好了吗？让我们从 Babel 简介 开始你的 JavaScript 编译学习之旅！

最后更新：2026-03-28