[TOC]
* * * * *
### **一、babel 介绍**
`Babel `是一个 `JavaScript `编译器，它可以将` es6`中的代码编译成目前大多数浏览器识别的`es5`代码。
例如它将以ES6代码下：
```JavaScript
let test = a =>console.log(a)
```
编译成ES5 代码：
```JavaScript
"use strict";
var test = function (a){
return a
}
```
并且 babel 还支持 react的 JSX 语法
[babel中文网](https://www.babeljs.cn/)
### **二、babel 的使用方式**
#### **1. 浏览器中**
在页面中引入
```JavaScript
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
```
然后在 `.babelrc.` 配置文件中进行配置
#### **2. 命令使用**
首先先安装 `babel-cli`
```JavaScript
npm install babel-cli --save-dev // 局部安装的
```
然后可以执行下面命令
**需要注意的是**：执行以下命令前也需要先在 `.babelrc. `配置文件中进行配置, 不然不会编译文件
- 在命令版中输出编译的test.js 文件
```JavaScript
npx babel test.js
```
- 将编译文件输出指定的文件
```JavaScript
$ babel example.js --out-file compiled.js
# 或
$ babel example.js -o compiled.js
```
- 编译整个文件夹中的文件
```JavaScript
$ babel src --out-dir lib
# 或
$ babel src -d lib
```
另外还有一些其他的使用方法，常见的比如在webpack中使用，更多使用场景见 [官网](https://www.babeljs.cn/docs/setup/)
### **三、`.babelrc.` 配置文件**
在babel 编译es6之前需要知道该以哪种规则或条件去编译，而这些条件和编译方式我们写在`.babelrc.` 配置文件 中,也可在通过 `package.json` 来配置`.babelrc.` ，`Babel `会在正在被转录的文件的当前目录中查找一个` .babelrc` 文件。 如果不存在，它会遍历目录树，直到找到一个 `.babelrc` 文件，或一个 `package.json` 文件中有` "babel": {} `。另外我们还要下载一些相应的编译插件。
中文官网：[.babelrc 的使用方法](https://www.babeljs.cn/docs/usage/babelrc/)
```JavaScript
{
"presets": [],
"plugins": []
}
```
#### **1. 编译插件**
> 官方预设(preset), 有两种，一个是按年份(babel-preset-2017)，一个是按阶段(babel-preset-stage-X)。 这主要是根据TC39 委员会ECMASCRPIT 发布流程来制定的。TC39 委员会决定，从2016年开始，每年都会发布一个版本，它包括每年期限内完成的所有功能，同时ECMAScript的版本号也按年份编制，就有了ES2016, ES2017。所以也就有了babel-present-2016, babel-preset-2017， 对每一年新增的语法进行转化。babel-preset-latest 就是把所有es2015, es2016, es2017 全部包含在一起了。
以下是4 个不同阶段的（打包的）预设：
- babel-preset-stage-0
- babel-preset-stage-1
- babel-preset-stage-2
- babel-preset-stage-3
`babel-preset-latest` 编译插件是一个特殊的presets，包括了 `es2015`，`es2016`，`es2017`的插件（目前为止，以后有es2018也会包括进去）。即总是包含最新的编译插件。
由于现在浏览器对ES6 的支持度越来越高，如果我们使用`babel-preset-latest` 编译插件则会将一些本不需要的编译（大多数浏览器都支持的ES6 语法）编译成臃肿的es5语法。为此我们可以使用 `babel-preset-env`编译插件
#### **2. `.babelrc.` 的配置**
安装 `babel-preset-env`编译插件
```JavaScript
npm install -D babel-preset-env
```
在`.babelrc.` 配置文件中进行配置，没有选项的默认行为会运行所有转换（行为与babel-preset-latest相同）
```JavaScript
{
"presets": [
"env",
{
"targets":{
"browsers": ["last 2 versions", "ie >=8 "] // 指定支持主流浏览器最新的两个版本以及IE 7+:
},
"plugins":["transform-vue-jsx"], // 使用编译扩展插件，这里使用的vue扩展插件
"node": true, // 针对当前node版本进行编译
"modules": "amd" // 启用将ES6模块语法转换为另一种模块类型
}
]
}
```
当然我们还可以设置固定版本的浏览器：
```JavaScript
"targets": {
"chrome": 60
}
```
支持超过市场份额5%的浏览器:
```JavaScript
"targets": {
"browsers": "> 5%"
}
```
babel 的更多配置 [http://babeljs.io/docs/en/babel-preset-env/](http://babeljs.io/docs/en/babel-preset-env/)
[参考文章](https://segmentfault.com/a/1190000008159877#articleHeader6)
