「这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战」
1. Babel 命令行使用
babel 本身可以作为一个独立的工具（和 postcss 一样，可以不和 webpack 等构建工具结合在一起使用）单独使用。
如果我们希望在命令行中使用 babel（即不借助于 webpack，单独使用 babel），需要安装下面两个库：
-
@babel/core：babel的核心代码，必须安装； -
@babel/cli：可以让我们在命令行中使用babel的工具（命令行中使用babel时需要，假如是在webpack中使用babel，就不需要安装这个库了）；@xxx/xxx的格式其实就代表该库（babel）是以monorepo的方式进行管理的
我们先来安装这两个库：
npm install @babel/core @babel/cli -D
这里我们主要是想在当前项目中使用（局部安装）这两个库，所以只需要将它们作为开发时依赖即可，即使用
-D方式安装，当然，你也可以使用-g方式安装，即全局安装，那么就可以在任何地方使用这两个库了。
安装完成后，就意味着当前项目目录（webpack_babel）下的 node_modules 文件夹中已经有这两个库对应的代码了，我们就可以利用它们来对某些 JavaScript 代码做转化了。举个例子，我们在当前项目目录下新建 demo.js 文件，其内容如下：
const message = "Hello World";
const names = ['王毅', '朱广权', 'zhj'];
names.forEach(item => console.log(item));
上面的代码中，const 是 ES6 中定义常量的关键字，我们将一个箭头函数传给了 forEach 方法的第一个参数，const 和箭头函数都属于 ES6 语法。那如果我们想要将这些 ES6 代码转成 ES5 的代码，就可以使用 Babel 来帮我们实现：
npx babel demo.js --out-dir dist
- 因为我们是局部安装的
babel，所以要去局部找babel的命令的话，就需要通过npx； npx babel后面跟要转换的源文件（夹）；--out-dir用来指定转换后要输出的文件夹；- 更多关于
@babel/cli的用法可以查阅官方文档：babeljs.io/docs/en/bab…
所以上面这条命令的意思就是：使用 ./node_modules/.bin/babel 命令，对当前目录下的 demo.js 文件中的代码做转化，将转化后的代码输出到 ./dist 目录下。
我们在命令行终端执行上面这条命令，效果如下：
当然，使用 babel 对一个文件进行处理时，除了把转化后的文件输出到指定的目录中，也可以输出到指定的文件中：
npx babel demo.js --out-file test.js
如果使用
--out-dir test.js，结果会生成test.js文件夹，而不是test.js文件哦~
使用 --out-file 后，效果如下：
但你会发现，通过上述两条命令对 ES6 的代码做处理后，输出的依然都是 ES6 的代码，这是为什么呢？这是因为我们在使用 babel 时，如果想要对 ES6 中具体的某个语法进行转化，还必须使用该语法对应插件。比如我们需要转换箭头函数，那么就需要使用转换箭头函数相关的插件：@babel/plugin-transform-arrow-functions，我们来安装它：
npm install -D @babel/plugin-transform-arrow-functions
安装完成后，我们还需要告诉 babel 去使用这个插件：
npx babel demo.js --out-file test.js --plugins=@babel/plugin-transform-arrow-functions
我们通过在之前的命令后添加 --plugins 选项（你看，这里加了 s，可见后面可以跟多个插件）指定在编译（转化）中要使用的插件。执行上述命令后，输出的 test.js 文件内容如下：
可以看到，原来 demo.js 中的箭头函数已经被转换成了普通函数，说明 babel 有利用这个 @babel/plugin-transform-arrow-functions 插件对代码进行转化。
但是，代码中的 const 依然没有被转换，这是因为 arrow-functions 插件并没有提供这样的功能，我们还需要这个插件：@babel/plugin-transform-block-scoping（block-scoping 即块级作用域，ES6 之前 var 定义的变量是没有块级作用域的，而 ES6 中的 let 和 const 定义的变量时有块级作用域的），我们先来安装它：
npm install -D @babel/plugin-transform-block-scoping
然后，我们在之前命令的基础上再多加上这个插件，多个插件之间用逗号分隔：
npx babel demo.js --out-file test.js --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping
执行上述命令后，效果如下：
可以看到，通过 block-scoping 插件，就能把 const（ES6 的语法）转换成 var（ES5 的语法）了。
因此，在开发中，如果想要转换 ES6 中的某个语法，就需要找到该语法对应的插件，利用该插件帮助我们做对应的转化。
关于 babel 的更多插件信息，可以查阅其官方文档：babeljs.io/docs/en/plu…
1.1 Babel 的预设（Presets）
前面我们提到，如果想要转换 ES6 中的某个语法，就需要找到该语法对应的插件，利用该插件帮助我们做对应的转化。但是 ES6（以及 ES7、ES8 等等）中的语法有很多，如果每转化一个语法就需要去安装对应的插件，那也太麻烦了。考虑到这点，Babel 给我们提供了另外一个东西：Presets（预设），它把我们常用的需要安装的插件集合到了一起，我们就不需要再单独一个个安装了。
我们这里想要编译（转换）ES2015+ 的语法，就可以使用 @babel/preset-env 这个预设，我们先来安装它：
npm install @babel/preset-env -D
因为是预设，其依赖的东西肯定比较多，所以安装过程可能会慢一点。安装完成后，我们想使用这个预设，就可以这样做：
npx babel demo.js --out-file test.js --presets=@babel/preset-env
我们通过 --presets 选项（你看，这里加了 s，可见后面可以跟多个预设，我们这里只需要使用 ES6+ 的预设就可以了，根据需要，你也可以添加 TypeScript 的预设、React 的预设和 Flow 的预设）指定在编译（转化）中要使用的预设。
执行上述命令后，输出的 test.js 文件内容如下 ：
可以看到，之前的 ES6 语法都已经转换成了 ES5 语法，并且在文件的头部，还标识了代码要使用严格模式。可见，预设里面包含的东西是很多的。
在开发中，我们通常直接使用预设即可，一般不需要一个个地去配置对应的插件。
以上，就是 babel 在命令行中的基本使用。
