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. 性能考虑：只包含项目实际需要的插件，避免不必要的转换；

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