什么是 @babel/cli？
@babel/cli 是一个在命令行下使用 babel 的工具，可以将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 版本，以便在旧版浏览器或环境中运行。
安装@babel/cli包
在终端中输入以下命令安装 @babel/cli：
--- ------- ---------- ----------
基本用法
配置文件
在使用 @babel/cli 转换代码之前，我们首先需要创建一个 Babel 配置文件，在项目根目录下新建一个 .babelrc 文件，添加如下内容：
-
---------- -
-------------------
-
-这个要性是在进行转换代码的时候，先自行寻找集成了 "@babel/preset-env" 插件的babel模块来进行代码的转化。
命令行
在终端中使用以下命令转换指定的文件：
--- ----- --------- ---------- -----------
npx会找到项目中安装的 @babel/cli,同时会自动寻找node_modules中的.bin/babel可执行文件。
例如，我们可以使用以下命令来转换 src/app.js：
--- ----- ---------- ---------- -----------
高级用法
转换插件
插件是用于转换 JavaScript 代码的 Babel 扩展程序。可以通过插件自定义转换的方式，以达到让自己更加顺手的目标。
举个例子，我们可以使用 @babel/plugin-transform-arrow-functions 模块来转换箭头函数：
--- ------- ---------- ---------------------------------------
在 .babelrc 文件中添加：
-
---------- -
-----------------------------------------
-
-这样，在转换代码时就会自动转换箭头函数。
预设插件
预设插件是一组插件的集合，可以方便的进行批量转换。
现有的预设插件集合通常有一下模块的集成：@babel/preset-env、@babel/preset-react等等。
可以在安装预设插件时按深入描述寻找，也可以直接使用 npm 来安装：
--- ------- ---------- -----------------
在 .babelrc 文件中可以使用 presets 配置选项来添加预设插件：
-
---------- -
-------------------
-
-编写运行 Babel
除了使用命令行直接转换代码之外，还可以通过编写 Node.js 脚本来进行转换操作。
可以先安装 @babel/core 模块：
--- ------- ---------- -----------
然后编写一个简单的转换脚本：
-- ------------
----- ----- - -----------------------
----- -- - --------------
------------------------- ----- ----- -- -
------- -
--------------------- -----------------
- ---- -
----- ------ - --------------------- -
-------- ---------------------
---
--------------------------- ------------ ------ ----- --------- -------- ----- -- -
------- -
--------------------- -----------------
- ---- -
----------------------- ------------------
-
---
-
---在终端中执行此脚本：
---- ------------
转换后的代码将会写入到 dist/app.js 文件中。
总结
@babel/cli 是一个非常强大的工具，可以大幅度提高 JavaScript 开发者的开发效率，并让代码更加兼容各种环境和浏览器，值得开发者掌握和运用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/83587