Babel 的一些常用插件及其使用方式

Babel 是一个 JavaScript 编译器，可以将 ES6+ 的代码转换成向后兼容的 JavaScript 代码，以便在现有的浏览器和环境中运行。Babel 通过插件机制来扩展其功能，本文将介绍一些常用的 Babel 插件及其使用方式。

@babel/preset-env

@babel/preset-env 是 Babel 官方推荐的预设插件，可以根据指定的目标环境自动选择需要的插件，以达到最小化的转换代码和最高的兼容性。例如，如果你的目标环境是现代浏览器，那么它只会转换不支持的语法特性，而不会进行 polyfill。

使用方式：

// javascriptcn.com 代码示例
// 安装依赖
npm install --save-dev @babel/preset-env

// 在 .babelrc 或者 babel.config.js 中配置
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "chrome": "58",
        "ie": "11"
      }
    }]
  ]
}

@babel/plugin-transform-runtime

@babel/plugin-transform-runtime 可以将你的代码中的公共代码提取为一个单独的模块，并且在运行时引入。这样可以避免重复代码的生成，同时也可以避免污染全局变量。

使用方式：

// javascriptcn.com 代码示例
// 安装依赖
npm install --save-dev @babel/plugin-transform-runtime @babel/runtime

// 在 .babelrc 或者 babel.config.js 中配置
{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 3
    }]
  ]
}

@babel/plugin-proposal-class-properties

@babel/plugin-proposal-class-properties 可以让你使用类属性的新语法特性，例如箭头函数。

使用方式：

// javascriptcn.com 代码示例
// 安装依赖
npm install --save-dev @babel/plugin-proposal-class-properties

// 在 .babelrc 或者 babel.config.js 中配置
{
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

@babel/plugin-proposal-decorators

@babel/plugin-proposal-decorators 可以让你使用装饰器语法，可以用于类和类属性。

使用方式：

// javascriptcn.com 代码示例
// 安装依赖
npm install --save-dev @babel/plugin-proposal-decorators

// 在 .babelrc 或者 babel.config.js 中配置
{
  "plugins": [
    ["@babel/plugin-proposal-decorators", {
      "legacy": true
    }]
  ]
}

@babel/plugin-proposal-optional-chaining

@babel/plugin-proposal-optional-chaining 可以让你使用可选链语法，可以避免出现 undefined 和 null 的异常情况。

使用方式：

// javascriptcn.com 代码示例
// 安装依赖
npm install --save-dev @babel/plugin-proposal-optional-chaining

// 在 .babelrc 或者 babel.config.js 中配置
{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining"
  ]
}

总结

本文介绍了一些常用的 Babel 插件及其使用方式，包括 @babel/preset-env、@babel/plugin-transform-runtime、@babel/plugin-proposal-class-properties、@babel/plugin-proposal-decorators 和 @babel/plugin-proposal-optional-chaining。使用这些插件可以让你更方便地编写符合最新语法规范的代码，并且可以兼容更多的浏览器和环境。

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