Babel 介绍
Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。 这一过程叫做“源码到源码”编译， 也被称为转换编译（transpiling，是一个自造合成词，即转换＋编译。以下也简称为转译）。
例如，Babel 能够将新的 ES2015 箭头函数语法：
const square = n => n * n;转译为：
const square = function square(n) { return n * n;};不过 Babel 的用途并不止于此，它支持语法扩展，能支持像 React 所用的 JSX 语法，同时还支持用于静态类型检查的流式语法（Flow Syntax）。
安装 Babel
由于 JavaScript 社区没有统一的构建工具、框架、平台等等，因此 Babel 正式集成了对所有主流工具的支持。 从 Gulp 到 Browserify，从 Ember 到 Meteor，不管你的环境设置如何，Babel 都有正式的集成支持。
全局命令babel-cli
Babel 的 CLI 是一种在命令行下使用 Babel 编译文件的简单方法。
npm install --global babel-cli基本用法
# 转码结果输出到标准输出
babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
babel example.js --out-file compiled.js
# 或者
babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir lib
# 或者
babel src -d lib
# -s 参数生成source map文件
babel src -d lib -s在项目内运行
尽管你可以把 Babel CLI 全局安装在你的机器上，但是按项目安装在本地会更好。
有两个主要的原因。
- 在同一台机器上的不同项目或许会依赖不同版本的Babel并允许你有选择的更新。
- 这意味着你对工作环境没有隐式依赖，这让你的项目有很好的可移植性并且易于安装。
在（项目）本地安装 Babel CLI 可以运行：
npm install --save-dev babel-cli注意： 因为全局运行 Babel 通常不是什么好习惯所以如果你想要卸载全局安装的 Babel 的话，可以运行：
npm uninstall —global babel-cli
安装完成后，在 package.json 添加：
"scripts": {
"build": "babel src -d lib"
}babel src -d lib 表示将src目录的代码转译到lib目录
现在可以在终端里运行：
npm run build运行效果
配置 Babel
目前为止通过运行 Babel 自己我们并没能“翻译”代码，而仅仅是把代码从一处拷贝到了另一处。你可以通过安装插件（plugins） 或预设（presets，也就是一组插件） 来指示 Babel 去做什么事情。
这时候我们需要创建一个配置文件。你需要做的就是在项目的根路径下创建 .babelrc 文件。然后输入以下内容作为开始：
{
"presets": [],
"plugins": []
}这个文件就是用来让 Babel 做你要它做的事情的配置文件。
转译为ES5代码
我们先从让 Babel 把 ES2015（最新版本的 JavaScript 标准，也叫做 ES6）编译成 ES5（现今在大多数 JavaScript 环境下可用的版本）开始吧。
我们需要安装 “es2015” Babel 预设：
npm install --save-dev babel-preset-es2015我们修改 .babelrc 来包含这个预设。
{
"presets": [
"es2015"
],
"plugins": []
}此时我们再次运行 npm run build
我们再次查看lib文件夹下的代码，已经成功转译为ES5代码了
兼容性补丁
Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。
举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。
npm 安装：
npm install --save babel-polyfill然后只需要在文件顶部导入 polyfill 就可以了：
import "babel-polyfill";插件选项
插件也有用于配置自身的设置。很多转换器都有“宽松”模式，通过放弃一些标准中的行为来生成更简化且性能更好的代码。
要为插件添加选项，只需要做出以下更改：
["transform-es2015-classes", { "loose": true }]快速使用
- 安装插件
npm install --save-dev babel-cli babel-preset-es2015 babel-polyfill- 修改
package.json,添加以下字段
"scripts": {
"build": "babel src -d lib"
}- 在根目录新建.babelrc文件，并添加以下配置
{
"presets": ["es2015"],
"plugins": []
}- 运行
npm run build即可转译为ES5的兼容代码
参考文章：
