Babel 插件与预设的区别及使用

1. 两者区别

1.1. Babel 插件 (Plugins)

1. 单一功能：每个插件通常只实现一个特定的转换功能；

2. 粒度更细：可以精确控制需要转换的每个语言特性；

3. 执行顺序：插件在预设之前运行，且按顺序从前到后执行；

1.2. Babel 预设 (Presets)

1. 插件集合：预设是一组插件的集合，用于特定目的；

2. 开箱即用：提供常用配置，避免手动添加大量插件；

3. 场景化：通常针对特定环境或框架（如 @babel/preset-env 用于ES6+转换）；

2. 使用示例

2.1. 仅使用插件

// .babelrc 或 babel.config.js
{
  "plugins": [
    "@babel/plugin-transform-arrow-functions", // 转换箭头函数
    "@babel/plugin-transform-template-literals" // 转换模板字符串
  ]
}

2.2. 使用预设

{
  "presets": [
    "@babel/preset-env", // 根据目标环境自动确定需要的转换
    "@babel/preset-react" // 转换JSX
  ]
}

2.3. 混合使用插件和预设

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "babel-plugin-lodash", // 单独添加lodash优化插件
    ["babel-plugin-transform-remove-console", { "exclude": ["error", "warn"] }] // 带配置的插件
  ]
}

2.4. 在项目中的完整配置示例 (babel.config.js)

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          browsers: ["last 2 versions", "safari >= 7"]
        },
        useBuiltIns: "usage",
        corejs: 3
      }
    ],
    "@babel/preset-typescript"
  ],
  plugins: [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ]
};

3. 选择建议

1. 对于新项目：通常从预设开始（如 @babel/preset-env），再根据需要添加插件；

2. 对于定制需求：当预设不能满足特定转换需求时，添加相应插件；

3. 性能考虑：只包含项目实际需要的插件，避免不必要的转换；

预设提供了便捷的默认配置，而插件则提供了更精细的控制能力，两者通常结合使用以达到最佳效果。