本文共 1462 字，大约阅读时间需要 4 分钟。

Babel预设与插件配置指南

一、Babel预设的核心配置

Babel作为前端开发的利器，通过预设和插件的结合，能够将现代 JavaScript 转换为浏览器兼容的代码。最常用的预设是 @babel/preset-env，它能够自动处理最新的 JavaScript 标签，而无需逐一配置转换规则。

1. @babel/preset-env 的基本使用

在项目的 Babel 配置文件中，添加以下内容：

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

2. 浏览器兼容配置

默认情况下，Babel 会为所有主流浏览器生成代码。为了优化兼容性，可以通过 .browserslistrc 文件定义浏览器的范围。例如：

last 3 version > 1% not ie <= 8

3. 高级配置

Babel 预设还支持一些高级选项，如 useBuiltIns 和 corejs。通过这些选项，可以灵活配置代码的转换规则。

{  "presets": [    ["@babel/preset-env", {      "useBuiltIns": "usage",      "corejs": 3    }]  ]}

二、常用 Babel 插件

插件可以扩展 Babel 的功能，实现特定的代码转换。插件的执行顺序是：插件先运行，预设后运行。

1. @babel/plugin-proposal-class-properties

支持在类中直接定义字段：

class A {  a = 1;  constructor() {    this.b = 3;  }}

2. @babel/plugin-proposal-function-bind

实现方法属性的动态绑定：

function Print() {  console.log(this.loginId);}const obj = { loginId: "abc" };obj::Print(); // 等同于 Print.call(obj);

3. @babel/plugin-proposal-optional-chaining

实现可选链：

const obj = {  foo: {    bar: {      baz: 42    }  }};// 42const baz = obj?.foo?.bar?.baz;// undefinedconst safe = obj?.qux?.baz;

4. babel-plugin-transform-remove-console

移除控制台输出：

console.log("foo");console.error("bar");

编译后结果为空代码。

5. @babel/plugin-transform-runtime

提供公共 runtime API，简化代码转换。

三、Babel 在 Webpack 中的应用

在 Webpack 项目中，推荐使用 babel-loader：

module.exports = {  mode: "development",  devtool: "source-map",  module: {    rules: [      {        test: /\.js$/,        use: "babel-loader"      }    ]  }}

通过以上配置，可以轻松在项目中应用 Babel 预设和插件，充分发挥其强大功能。