如何在 Babel 中配置 Plugins 和 Presets？

Babel 是一个广泛使用的 JavaScript 编译器，可以将新的 ECMAScript 版本转换为可在当前浏览器中运行的 JavaScript 代码。Babel 可以通过 Plugins 和 Presets 进行配置，以适应不同的项目需求。在本篇文章中，我们将深入探讨如何在 Babel 中配置 Plugins 和 Presets。

Plugins 和 Presets 简介

Plugins 是 Babel 的扩展插件，它们可以添加新的语法特性或转换代码。例如，@babel/plugin-transform-arrow-functions 可以将 ES6 中的箭头函数转换为 ES5 中的普通函数。

Presets 是一组 Plugins 的集合，它们可以一次性地应用到项目中。例如，@babel/preset-env 包含了所有转换 ES6、ES7 和 ES8 的 Plugins。

配置 Babel

在项目中使用 Babel，需要先安装以下依赖：

npm install --save-dev @babel/core @babel/cli @babel/preset-env

安装完成后，在项目的根目录下创建一个 .babelrc 文件，用于配置 Babel。以下是一个简单的 .babelrc 文件示例：

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-transform-arrow-functions"
  ]
}

上述配置文件中，我们使用了 @babel/preset-env 和 @babel/plugin-transform-arrow-functions。其中 @babel/preset-env 包含了转换 ES6、ES7 和 ES8 的所有 Plugins，@babel/plugin-transform-arrow-functions 可以将 ES6 中的箭头函数转换为 ES5 中的普通函数。

配置 Plugins

在 .babelrc 文件中，可以通过 plugins 字段配置需要使用的 Plugins。例如，以下配置文件将使用 @babel/plugin-transform-arrow-functions 和 @babel/plugin-transform-block-scoping：

{
  "plugins": [
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-block-scoping"
  ]
}

配置 Presets

在 .babelrc 文件中，可以通过 presets 字段配置需要使用的 Presets。例如，以下配置文件将使用 @babel/preset-env：

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

配置 Plugins 和 Presets 的选项

在使用 Plugins 和 Presets 时，可以通过 options 字段配置选项。例如，以下配置文件将使用 @babel/preset-env，且指定了 targets 选项：

-- -------------------- ---- -------
-
  ---------- -
    --------------------- -
      ---------- -
        --------- -----
        ----- ----
      -
    --
  -
-

上述配置文件中，我们指定了 targets 选项，它用于指定需要支持的浏览器版本。

结论

在本文中，我们深入探讨了如何在 Babel 中配置 Plugins 和 Presets。通过配置 Plugins 和 Presets，我们可以根据项目需求自定义 Babel 的转换规则，以便在当前浏览器中运行 JavaScript 代码。

示例代码

以下是一个示例代码，它使用了 @babel/preset-env 和 @babel/plugin-transform-arrow-functions：

// index.js
const arr = [1, 2, 3];
const newArr = arr.map((item) => item * 2);
console.log(newArr);

-- -------------------- ---- -------
-- --------
-
  ---------- -
    -------------------
  --
  ---------- -
    -----------------------------------------
  -
-

转换后的代码：

"use strict";

var arr = [1, 2, 3];
var newArr = arr.map(function (item) {
  return item * 2;
});
console.log(newArr);

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6764b529856ee0c1d42d7caa