在现代前端开发中，我们通常使用 Babel 来将 ES6 或 ES7 代码转为 ES5，以便在目前的浏览器中运行。Babel 的转换过程基于 plugins 和 presets，本文将针对 Babel 6 中的 plugins 和 presets 进行详细的解析，并提供相应示例代码。
Plugins
Babel 中的 plugin 单独完成一项任务，例如箭头函数的转换或类属性的转换。Babel 社区提供了大量 plugins，可以满足我们的需求，同时我们也可以编写自己的 plugins。
编写一个简单的 plugin
假设我们要将 ES7 中的 a?.b 语法糖转换为 a == null ? void 0 : a.b，我们可以编写一个简单的 plugin：
-- -------------------- ---- -------
-------------- - ---------- ------ - -- -
------ -
-------- -
-------------------------------- -
-----------------
--------------------
-----
-------------------
------
------------------------------
---------------
--
-------------------
------------------------------
--------------------------------
-----
-
-
--
-
-
--
-module.exports 导出了一个函数，它接受一个对象参数 t。在此示例中，我们使用了此参数中的 types 属性，它包含 Babel 内部的类型信息，我们使用它来构造 AST。
此外，我们还定义了 visitor，它是一个对象，key 是 AST 节点类型，value 是一个函数，该函数接受一个 path 参数。
这个 plugin 中，我们定义了一个 OptionalMemberExpression 类型的 visitor，如果匹配到了一条类似 a?.b 的语句，我们将其转换为 a == null ? void 0 : a.b。
使用一个现有的 plugin
使用一个现有的 plugin 很简单，只需在编译前通过 npm 安装它，并在 .babelrc 或 Babel Loader 配置中指定即可。例如，我们要使用 Babel 官方提供的类属性插件：
npm install --save-dev @babel/plugin-proposal-class-properties
在 .babelrc 中添加：
{
"plugins": ["@babel/plugin-proposal-class-properties"]
}经过以上配置，我们就可以在代码中使用 ES7 的 class 属性语法，例如：
class Example {
static myStaticProp = "hello";
myInstanceProp = "world";
}常用的 plugins
除了类属性插件外，Babel 社区还提供了很多常用且实用的 plugins，例如：
- @babel/plugin-transform-arrow-functions：将箭头函数转换为普通函数
- @babel/plugin-transform-spread：将数组和对象扩展转换为函数调用
- @babel/plugin-proposal-object-rest-spread：转换为对象的 rest/spread 属性
Presets
preset 是一组为特定目的打包的 plugin 集合，在 Babel 配置中，多个 plugins 可以被打包成一个 preset，这使得配置变得更加简单直观。
使用一个现有的 preset
使用现有的 preset 非常简单，只需在编译前通过 npm 安装它，并在 .babelrc 或 Babel Loader 配置中指定即可。例如，我们要使用 Babel 官方提供的 ES6 解析器：
npm install --save-dev @babel/preset-env
在 .babelrc 中添加：
{
"presets": ["@babel/preset-env"]
}在这个 preset 中，Babel 将编译我们使用的 JavaScript，以便它可以在大多数浏览器中运行，这样就不需要在代码中使用 polyfill。
编写和使用自己的 preset
我们也可以根据自己的需求编写自己的 preset，例如：
-- -------------------- ---- -------
----- ----------------- - -- -- -
------ -
-------- -
-
--------------------
-
-------- -- --- --- ------
-------- -----
-
-
--
-------- -
--------------------------------------
------------------------------------------
-------------------------------------------
-
--
--
-------------- - ------------------这个自定义的 preset 将 babel/preset-env 和一些其他插件组成了一个自定义的 preset。
在这个 preset 中，我们将编译目标设置为不支持 ES5 的浏览器，并关闭了模块转换功能，添加了对动态导入，类属性和对象展开属性的支持。
默认情况下，Babel 会在项目根目录查找 .babelrc 文件或 package.json 文件中的 babel 属性，但它也可以通过 .babelrc，.babelrc.js，babel.config.js 和 package.json 设置。
结论
使用 plugins 和 presets 使得 Babel 配置变得更加简单直观，同时也为我们提供了许多实用的功能。在开发过程中，我们可以快速实现对新语法的支持，提高代码的兼容性。
尽管这些 plugins 和 presets 能够提高开发效率，但是要合理使用它们，因为过多的插件会极大地增加打包后的代码大小，并可能导致运行时性能下降。因此，我们应该仅使用我们确实需要的 plugins 和 presets。
最后，我希望通过本文的介绍，读者们可以更深入了解 Babel 的 plugins 和 presets，以便更好地开展自己的前端开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66efdc1d6fbf960197312038