跳到主要内容

Babel

Babel 的核心价值不是“让代码变短”，而是把现代语法和新特性转换成目标运行环境能理解的代码。

什么时候需要 Babel​

  • 需要兼容较旧浏览器
  • 项目里在写 JSX、TypeScript、装饰器等非原生浏览器语法
  • 需要按目标环境注入必要的 polyfill

它在构建链路里的位置​

源码 -> Babel 转译 -> 打包工具处理依赖 -> 输出构建产物

Babel 负责“转译”，不负责完整打包。

最常见的三个能力​

1. @babel/preset-env​

根据目标浏览器或 Node 版本，决定要做哪些语法转换。

2. @babel/preset-react​

处理 JSX。

3. @babel/preset-typescript​

移除 TypeScript 类型标注，让代码进入后续构建环节。

常见配置​

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: ['>0.25%', 'not dead'],
        },
        useBuiltIns: 'usage',
        corejs: 3,
      },
    ],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
  plugins: ['@babel/plugin-transform-runtime'],
};

几个容易混淆的点​

  • Babel 能处理语法转换，但不天然处理所有运行时 API 兼容
  • preset-typescript 不做类型检查，类型检查通常还是交给 tsc
  • Vite、Next.js、CRA 等框架可能已经内置了 Babel 或替代方案，不一定需要手配

实战建议​

  • 现代项目先看框架默认链路，不要一上来手写一整套 Babel 配置
  • 只有在兼容目标、特殊语法或自定义插件有明确需求时，再深入 Babel 细节