原理
Babel的功能非常纯粹，以字符串的形式将源代码传给它，它就会返回一段新的代码字符串（以及sourcemap）。他既不会运行你的代码，也不会将多个代码打包到一起，它就是个编译器，输入语言是ES6+，编译目标语言是ES5。
编译过程
1.解析：将代码字符串解析成抽象语法树
2.变换：对抽象语法树进行变换操作
3.再建：根据变换后的抽象语法树再生成代码字符串
配置文件
通过npm install --save-dev babel进行安装。
由于在Babel执行编译的过程中，会从项目的根目录下的 .babelrc文件中读取配置。所以安装后需要在项目中添加.babelrc文件（一个json格式的文件）主要是对预设(presets) 和 插件(plugins) 进行配置。基本格式如下：
"plugins": [ ],
"presets": [ ]
plugins
要加载和使用的插件，插件名前的babel-plugin-可省略；plugin列表按从头到尾的顺序运行
常用插件
- babel-cli: 用于在终端使用babel,用命令行转码
- babel-core: 如果某些代码需要调用Babel的API进行转码，就要使用* babel-core`模块
- babel-loader: 执行转义的核心包，允许你使用 babel 和 webpack 转译 javascript 等格式文件。
- babel-register模块改写require命令，为它加上一个钩子。此后，每当使用require加载.js、.jsx、.es和.es6后缀名的文件，就会先用Babel进行转码。
- babel-plugin-react-transform: 代替react-hot-loader的插件
- babel-polyfill Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。就比如ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。
presets
presets字段设定转码规则，官方有提供规则集，我们根据需求安装即可。
ES2015转码规则
npm install --save-dev babel-preset-es2015
react转码规则
npm install --save-dev babel-preset-react
ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3
然后，将这些规则加入.babelrc
env
env 的核心目的是通过配置得知目标环境的特点，然后只做必要的转换。例如目标浏览器支持 es2015，那么 es2015 这个 preset 其实是不需要的，于是代码就可以小一点(一般转化后的代码总是更长)，构建时间也可以缩短一些。如果不写任何配置项，env 等价于 latest，也等价于 es2015 + es2016 + es2017 三个相加(不包含 stage-x 中的插件)。
同时设置了presets和plugins，那么plugins的先运行；每个preset和plugin都可以再配置自己的option
