Babel 是一个 JavaScript 编译器，可以将 ECMAScript 2015+ 的代码转换为向后兼容的 JavaScript 版本，以便在旧版浏览器或环境中运行。Babel 支持使用插件扩展其功能，本文将介绍几个常见的 Babel 插件及如何使用它们。
@babel/preset-env
@babel/preset-env 是一个 Babel 插件集，它根据当前环境的配置，自动选择需要的转换插件。例如，如果你的目标浏览器支持 ES6，那么 @babel/preset-env 将不会转换 ES6 代码。你可以通过 .babelrc 或 babel.config.js 文件来配置它。
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
--------- -----
----- ----
--
-------------- --------
--------- ---
-
-
-
-上述配置将转换代码以适应 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();
}使用该插件后，上述代码将被转换为：
-- -------------------- ---- -------
--- ----------------- - ---------------------------------------------------
-------- ------------- -
------ ------------------------ -----------
-
-------- -------------- -
------------ - --------------------------- -- -
----- -------------------
---
------ ------------------------ -----------
-你可以通过以下方式启用该插件：
-- -------------------- ---- -------
-
---------- -
-
----------------------------------
-
--------- -
-
-
-
-上述配置将使用 @babel/runtime-corejs3 模块中的对应版本。
总结
Babel 插件可以扩展其功能，使其更适合你的项目需求。@babel/preset-env 可以根据当前环境的配置自动选择需要的转换插件，@babel/plugin-proposal-class-properties 可以允许你使用类的属性初始化器语法，@babel/plugin-transform-runtime 可以减小代码体积。你可以根据需求灵活地使用这些插件，以便更好地开发前端应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c1a119add4f0e0ffb9f88e