12.Babel

1.为什么需要babel?Babel 是什么？

（1）Babel 是一个工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为后兼容版本的JavaScript;

（2）包括：语法转换、源代码转换等；

Babel 命令行使用

babel本身可以作为一个对立的工具（和postcss一样） ，不和webpack等构建工具配置来单独使用。

如果我们希望在命令行尝试使用babel，需要安装如下库：

• @babel/core:babel 的核心代码，必须安装
• @babel/cil:  可以让我们在命令行使用babel

使用步骤：

1.首先得安装

npm install @babel/core @babel/cli -D

2.使用babel来处理我们的源代码：

• src:是源文件的目录；
• --out-dir: 指定要输出的文件夹dist;

  npx babel demo.js --out-dir dist
  

• 3.比如我们需要转换箭头函数，那么我们就可以使用箭头函数转换相关的插件：

• npm install @babel/plugin-transfrom-arrow-functions -D
  

  使用这个箭头函数转换的插件

• npx babel demo.js --out-file test.js --plugins
  

  4.块级作用域转换插件(使用方法和上述一样）

• npm install @babel/plugin-transfrom-block-scoping -D
  

Babel 的预设preset

• 但是如果要转换的内容过多，一个个设置是比较麻烦的，我们可以使用预设（preset）

• 后面我们在具体来讲预设代表的含义；

• 1.安装@babel/preset-env预设：

• npm install @babel/preset-env -D
  

  2.使用：

• npx babel demo.js --out-file test.js --presets=@babel/preset-env