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