在前端开发中，我们常常使用 ES6+ 的语法进行开发，但是这些语法并不能被所有的浏览器所兼容，这就需要通过转换将其转换成 ES5 语法，以兼容老旧的浏览器。
lebab 是一个非常出色的工具，它可以将 ES6+ 语法自动转换成 ES5 语法。而 @aldendaniels/lebab 就是一个基于 lebab 的 npm 包，用于提供一个更加易用的转换器。
本文将为大家详细介绍 @aldendaniels/lebab 的使用教程，包括安装，配置以及使用方法等内容。
安装
使用 npm 安装 @aldendaniels/lebab：
$ npm install -g @aldendaniels/lebab
配置
在使用 @aldendaniels/lebab 之前，我们需要进行一些配置：
配置规则
在配置文件（.lebabrc）中，我们可以指定使用哪些规则来转换代码。例如，我们可以使用以下配置来将箭头函数转换成普通函数：
{
"transform": [
"arrow"
]
}在这个配置中，我们指定了只使用 arrow 规则，表示只将箭头函数进行转换操作。
配置输出目录
如果我们需要将转换之后的文件保存到特定的目录下，那么可以使用 -o 参数来指定输出目录：
$ lebab -o dist/ src/
这样，@aldendaniels/lebab 就会将 src/ 目录下的文件转换后保存到 dist/ 目录下。
配置自定义参数
在使用 @aldendaniels/lebab 时，可能会需要一些自定义的参数，例如指定输入目录、输出目录等等。可以在命令行中使用 -x 参数来传递自定义参数。
例如，我们可以使用以下命令来将 src/ 目录下的文件转换成 ES5 语法，并保存到 dist/ 目录下：
$ lebab -x inputDir=src/ -x outputDir=dist/ --transform arrow
使用方法
在进行转换之前，我们需要先创建一个 .lebabrc 配置文件，指定需要转换哪些规则。
将以下代码复制到 .lebabrc 配置文件中：
-- -------------------- ---- -------
-
------------ -
--------
------
--------
-----------
----------------
-----------------
-----------------
-------------
----------------
------------
-----------
-----------
------------
------------------
-----------
---------
-------------
-------------------
------------------
--------------
--------------------
---------------
-
-以上规则在转换时会将箭头函数、let、class、模板字符串，以及 ES6+ 中还没有兼容的语法转换为 ES5 语法。
然后在命令行中输入以下内容：
$ lebab -x inputDir=./src -x outputDir=./dist
以上命令实现的功能是将当前目录下的 src 文件夹中的 ES6+ 语法转换成 ES5 语法，并保存到 dist 文件夹中。
示例代码
以下是一段使用 @aldendaniels/lebab 进行转换的示例代码：
-- -------------------- ---- -------
----- ----- - ------ -- ------- ---------
----- ------ - --------- ------ ----------
----- --------- - ---------------- -- --
------
------------- ----- --- ----- - ----- - -----
------ --
----
----- -------------- -
----------------------- -
-------------- - ----------
--------------- - -----------
-
-------------- -
------ ---------------
-
--------------- -
------ ----------------
-
-
----- -------------- - --- --------------------
----------------------- ---------------------------------------------------
------------------ ------ ------------------------------------
---------------------------以上代码中包含了箭头函数、let、class、模板字符串等 ES6+ 语法，通过使用 @aldendaniels/lebab 转换之后可以兼容多个浏览器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e381e8991b448d77f7