常见 Babel 插件及如何使用它们

Babel 是一个 JavaScript 编译器，可以将 ECMAScript 2015+ 的代码转换为向后兼容的 JavaScript 版本，以便在旧版浏览器或环境中运行。Babel 支持使用插件扩展其功能，本文将介绍几个常见的 Babel 插件及如何使用它们。

@babel/preset-env

@babel/preset-env 是一个 Babel 插件集，它根据当前环境的配置，自动选择需要的转换插件。例如，如果你的目标浏览器支持 ES6，那么 @babel/preset-env 将不会转换 ES6 代码。你可以通过 .babelrc 或 babel.config.js 文件来配置它。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58",
          "ie": "11"
        },
        "useBuiltIns": "usage",
        "corejs": "3"
      }
    ]
  ]
}

上述配置将转换代码以适应 Chrome 58 及以上版本和 IE 11，同时使用 @babel/polyfill 来填充缺失的特性。

@babel/plugin-proposal-class-properties

@babel/plugin-proposal-class-properties 是一个 Babel 插件，它允许你使用类的属性初始化器语法。例如，你可以这样定义一个类：

class MyClass {
  myProp = 42;
}

使用该插件后，上述代码将被转换为：

class MyClass {
  constructor() {
    this.myProp = 42;
  }
}

你可以通过以下方式启用该插件：

{
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

@babel/plugin-transform-runtime

@babel/plugin-transform-runtime 是一个 Babel 插件，它将你的代码中使用的内置函数和对象转换为引用 @babel/runtime 模块中的对应版本，以减小代码体积。例如，你可以这样定义一个异步函数：

async function myAsyncFunc() {
  await doSomethingAsync();
}

使用该插件后，上述代码将被转换为：

var _asyncToGenerator = require("@babel/runtime/helpers/asyncToGenerator");

function myAsyncFunc() {
  return _myAsyncFunc.apply(this, arguments);
}

function _myAsyncFunc() {
  _myAsyncFunc = _asyncToGenerator(function* () {
    yield doSomethingAsync();
  });
  return _myAsyncFunc.apply(this, arguments);
}

你可以通过以下方式启用该插件：

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3
      }
    ]
  ]
}

上述配置将使用 @babel/runtime-corejs3 模块中的对应版本。

总结

Babel 插件可以扩展其功能，使其更适合你的项目需求。@babel/preset-env 可以根据当前环境的配置自动选择需要的转换插件，@babel/plugin-proposal-class-properties 可以允许你使用类的属性初始化器语法，@babel/plugin-transform-runtime 可以减小代码体积。你可以根据需求灵活地使用这些插件，以便更好地开发前端应用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c1a119add4f0e0ffb9f88e