Babel 是一个 JavaScript 的编译器，可以将 ECMAScript 6+ 的代码转换成向后兼容的 JavaScript 代码，从而可以在当前浏览器或环境中运行。Babel 有大量的插件来完成各种不同的转换任务。本文将介绍一些常用的 Babel 插件及其使用方法来获得更好的 JS 文件转换结果。
1. @babel/preset-env
@babel/preset-env 是一个智能预设，它根据你想要支持的浏览器或环境，自动加载需要的插件来进行代码转换。它可以让你的代码更快、更小，并且可以自动处理浏览器的兼容性问题。
安装
npm install --save-dev @babel/preset-env
使用方法
在 .babelrc 或 babel.config.js 文件中，将 @babel/preset-env 添加到 presets 中：
{
"presets": ["@babel/preset-env"]
}这样 Babel 将会根据你的环境自动添加相应的插件来进行代码转换。例如，如果你想支持最新的两个主流浏览器，那么可以添加：
-- -------------------- ---- -------
-
---------- -
--------------------- -
---------- -
----------- --- ---- ----- - ----------
-
--
-
-这会将你的代码转换成支持最新的两个主流浏览器的代码。这里的 "> 1%" 表示浏览器市场份额大于 1% 的浏览器，"last 2 versions" 表示浏览器的最新的两个版本。
2. @babel/plugin-transform-runtime
@babel/plugin-transform-runtime 可以自动将 Babel 编译的代码中，使用了 Promise、Generator、Set 等新的对象或方法的代码，转换成使用 @babel/runtime 的函数或对象。这样可以减小打包后文件的体积。
安装
npm install --save-dev @babel/plugin-transform-runtime @babel/runtime
使用方法
在 .babelrc 或 babel.config.js 文件中，添加 @babel/plugin-transform-runtime 到 plugins 中：
{
"plugins": ["@babel/plugin-transform-runtime"]
}同时需要在项目中安装 @babel/runtime 。
npm install --save @babel/runtime
3. @babel/plugin-proposal-decorators
@babel/plugin-proposal-decorators 用来支持 JavaScript 的修饰器语法，可以让你在类、属性、方法等前面添加修饰器来增加一些新特性，例如：
-- -------------------- ---- ------- -------- ---------------- ----- ----------- - ------------------- - ------ ------ ----------- - ----- ------- - --------- ---- - --- -
安装
npm install --save-dev @babel/plugin-proposal-decorators
使用方法
在 .babelrc 或 babel.config.js 文件中，添加 @babel/plugin-proposal-decorators 到 plugins 中：
{
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
}"legacy": true 表示开启传统模式。当你的代码中需要同时使用修饰器和类属性时，需要添加：
{
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}示例代码
.babelrc
-- -------------------- ---- -------
-
---------- -
--------------------- -
---------- -
----------- --- ---- ----- - ----------
-
--
--
---------- -
----------------------------------- -
--------- -
---
------------------------------------- - --------- ---- ---
------------------------------------------- - -------- ---- --
-
-代码转换前
-- -------------------- ---- -------
------ ------------------
----- -------- ----- -
----- ------------- - ----- --------------------
----- ----------- - --- ------- -- ----
----------------------------- ---------------
--------------------------- -------------
-
----- ------- -
---------
---- - ---
------------------
-------- -
-- ---
-
-代码转换后
-- -------------------- ---- -------
---- --------
---------------------------
----- -------- ----- -
----- ------------- - ----- -----------------------------
----- ----------- - --- ---------------- -- ----
----------------------------- ---------------
--------------------------- -------------
-
--- ------- - ----- - --------- ----- - ------------------ ------- - ----- ------- -
------------- -
--------- - ---
-
-------- -
-- ---
-
-- -------------------------------------------- ------- ------- ------------------------------------------------- -------- ------------------ ------------------------------------------- --------- -------- ------------------------------------------------- ---------- ------------------- ---------
-------- --------------------------------- --------- ----------- ----------- -------- -
--- ---- - ---
---------------------------------------- ----- -
--------- - ----------------
---
--------------- - ------------------
----------------- - --------------------
-- -------- -- ---- -- ----------------- ------------- - -----
------------------------------------- ----------- -
---- - ----------------- --------- ----- -- -----
---
-- -------- -- ---------------- --- ---- -- -
------------------------------ --------- ------
---- - -----
-
------ -----
-
-------- ---------------- ----- ----------- -
------------------- - ------
------ -----------
-
-------- ----------------- -
------ -------- -------- ----- ----------- -
--------------------- - ------
------ -----------
--
-结论
Babel 插件可以帮助我们更好地转换代码，让我们的代码能够支持更多的浏览器或环境，并且可以减小打包后文件的体积。通过本文介绍的 @babel/preset-env、@babel/plugin-transform-runtime、@babel/plugin-proposal-decorators 可以让我们的代码更加高效、简洁、易读、易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f643cbc5c563ced580f3b7