babel常用配置

在实际项目开发中，Babel 配置的核心作用是将现代 JavaScript 语法（如 ES6+）、JSX 等转换为浏览器兼容的代码。以下是项目中最常用的 Babel 配置项和场景：

一、核心预设（Presets）

预设是预定义的插件集合，用于处理特定场景的语法转换，是配置的基础。

1. @babel/preset-env（必选）

• 作用：根据目标浏览器/环境自动转换 ES6+ 语法（如箭头函数、async/await、类等），无需手动配置单个插件。
• 常用配置：

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": "> 0.25%, not dead", // 目标浏览器范围（基于 browserslist）
        "useBuiltIns": "usage", // 自动引入所需的 polyfill（按需加载）
        "corejs": 3 // 指定 core-js 版本（需安装 core-js@3）
      }]
    ]
  }

  • targets：可指定具体浏览器版本（如 {"chrome": "80", "ie": "11"}），或使用 .browserslistrc 文件统一管理。
  • useBuiltIns: "usage"：自动检测代码中使用的 ES6+ 特性，只引入必要的 polyfill，减小体积。

2. @babel/preset-react（React 项目必选）

• 作用：转换 JSX 语法为 React.createElement 调用，处理 React 相关语法。
• 常用配置：

  {
    "presets": [
      ["@babel/preset-react", {
        "runtime": "automatic" // 自动引入 React（无需手动写 import React from 'react'）
      }]
    ]
  }

  • runtime: "automatic"：是 React 17+ 推荐配置，简化代码。

3. @babel/preset-typescript（TypeScript 项目必选）

• 作用：将 TypeScript 转换为 JavaScript（仅处理语法，类型检查由 TypeScript 自身负责）。
• 配置：

  {
    "presets": ["@babel/preset-typescript"]
  }

二、常用插件（Plugins）

插件用于处理预设未覆盖的特定语法或功能。

1. @babel/plugin-transform-runtime + @babel/runtime

• 作用：
  • 复用辅助代码（如 _classCallCheck），减少重复代码，减小打包体积。
  • 避免全局污染（通过沙箱方式引入 polyfill）。
• 配置：

  {
    "plugins": [
      ["@babel/plugin-transform-runtime", {
        "corejs": 3 // 需安装 @babel/runtime-corejs3，提供 polyfill 支持
      }]
    ]
  }

  • 通常与 @babel/preset-env 配合使用，前者处理语法转换，后者处理代码复用。

2. @babel/plugin-proposal-decorators（装饰器语法）

• 作用：支持类装饰器（如 React 高阶组件、MobX 的 @observable）。
• 配置：

  {
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "version": "2023-01" }], // 最新装饰器标准
      ["@babel/plugin-proposal-class-properties"] // 支持类属性（如 class A { x = 1 }）
    ]
  }

3. babel-plugin-import（按需加载 UI 库）

• 作用：自动转换 UI 库的导入方式，实现按需加载（如 Ant Design、Element UI）。
• 配置（以 Ant Design 为例）：

  {
    "plugins": [
      ["import", {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css" // 自动引入样式文件
      }]
    ]
  }

  • 效果：import { Button } from 'antd' 会被转换为 import Button from 'antd/es/button'，只加载用到的组件。

4. @babel/plugin-syntax-dynamic-import（动态导入）

• 作用：支持 import() 动态导入语法（用于代码分割）。
• 配置：

  {
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
  }

  • 注意：该插件仅允许 Babel 解析动态导入语法，实际代码分割需配合 Webpack 等工具。

三、环境区分（env 配置）

根据环境（开发/生产）使用不同配置，优化构建效率或代码质量。

{
  "env": {
    "development": {
      "plugins": ["react-refresh/babel"] // 开发环境启用 HMR 刷新插件
    },
    "production": {
      "plugins": ["transform-remove-console"] // 生产环境移除 console
    }
  }
}

• 需通过 BABEL_ENV 或 NODE_ENV 环境变量指定环境（如 BABEL_ENV=production）。

四、其他实用配置

1. sourceType（模块类型）

• 指定代码模块类型，默认 module（支持 ES6 模块），如需兼容 CommonJS 可配置：

  { "sourceType": "unambiguous" } // 自动检测模块类型（ES6 或 CommonJS）

2. ignore（忽略文件）

• 排除不需要转换的文件（如 node_modules）：

  { "ignore": ["node_modules/**"] }

五、典型项目配置示例

React + ES6+ 项目

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "defaults",
      "useBuiltIns": "usage",
      "corejs": 3
    }],
    ["@babel/preset-react", { "runtime": "automatic" }]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", { "corejs": 3 }],
    ["import", { "libraryName": "antd", "style": "css" }]
  ],
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

TypeScript + React 项目

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3
      }
    ]
  ]
}

总结

核心配置围绕 语法转换（@babel/preset-env）、框架支持（@babel/preset-react/typescript）、体积优化（@babel/plugin-transform-runtime）、按需加载（babel-plugin-import）展开。实际项目中，需根据技术栈（React/Vue/TypeScript）和目标环境调整配置，优先使用预设而非单个插件，减少配置复杂度。