Babel 是一个流行的 JavaScript 转译器，可以将最新版本的 JavaScript 代码转换为向后兼容的旧版语法。Babel 的插件和预设是扩展 Babel 能力的主要方式之一。在本文中，我们将详细介绍 Babel 插件和预设之间的区别，并提供如何使用它们的深入指导。
插件
Babel 插件是用来修改 Babel 转译器的行为的工具。它们基于 babel-plugin-api 和 visitor pattern，并且可以被用于修改、重写或删除 AST 中的节点。
对象
Babel 插件是一个由以下两个属性组成的对象：
name：必需。一个字符串，用于标识此插件。visitor：必需。一个对象，包含了对应于各种 AST 节点类型的方法的集合。这些方法将会被 Babel 在遍历 AST 树时调用。
示例
下面是一个简单的 Babel 插件，它将所有的箭头函数转换为普通函数：
-- -------------------- ---- -------
-------------- - -------- -- -
------ -
----- ------------------------------------
-------- -
----------------------------- -
----- - ---- - - -----
----- - ------- ----- ----- - - -----
----- -------------- - -----
- ------------------------------- ------- -----
- -------------------------- ------- ------
---------------------------------
-
-
--
--以上代码中，我们定义了一个名为 arrow-function-to-normal-function 的插件，并实现了 ArrowFunctionExpression 方法。这个方法将被 Babel 在遍历 AST 树时调用，在此方法中，我们使用 path.replaceWith() 方法将箭头函数替换为普通函数。
预设
Babel 预设是一组预先配置好的插件集合，以方便用户快速开始使用。预设本质上是一个包含多个插件的数组。
对象
与插件不同，Babel 预设是一个包含以下两个属性的对象：
presetName：必需。一个字符串，用于标识此预设。plugins：必需。一个数组，包含此预设所依赖的所有 Babel 插件。
示例
下面是一个简单的 Babel 预设，称为 es2015，它包含了许多 ES6/ES2015 特性的转换器：
-- -------------------- ---- -------
----- ------- - -
-
--------------------
-
-------- -
--------- ---------- ---- -- ---- ---- ------- -----
--
------------ --------
------- -
-
-
--
-------------- - - ------- --在以上代码中，我们定义了一个名为 es2015 的 Babel 预设，并使用了 @babel/preset-env 插件，它可以根据目标浏览器自动转换 ES6/ES2015 代码（通过 browserslist 来进行配置）。
使用
使用 Babel 插件和预设的最常见方法是在 .babelrc 文件中定义它们。我们可以在此文件中列出我们需要的所有插件和预设，或者使用现成的预设。下面是一个示例 .babelrc 文件，它包含了一些常用的插件和预设：
-- -------------------- ---- -------
-
---------- -
--------------------
---------------------
--
---------- -
----------------------------------
------------------------------------------- - -------- ---- --
-
-在以上示例中，我们
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33425