现在的主流浏览器还没有完全兼容ES6的语法，如ie11就不支持箭头函数。
使用过es6的人都知道，es6更加简洁和强大，可是使用es6写出来的代码并不能得到所有主流js引擎的支持，针对这一点，一个解决方案就是使用babel这个工具。
babel是一个js处理器，可以对js代码进行转换，可以转换jsx、es6代码等。这里我们使用它来把es6代码转为es5代码。
有如下js代码：
let add = item => item + 1
console.log(add(1));
以上代码可以在chrome61 和 node 6.11 下执行，对于ie11，则运行报错。
首先安装babel指令：
npm install -g babel-cli
接着再安装一个我们需要用到的babel转换规则（把js代码转为es5）：
npm install --save-dev babel-preset-es2015
通知babel去应用这个规则，我们要在项目的根目录添加一个 .babelrc 文件：
{ "presets": [ "es2015" ], "plugins": [] }
以上三个步骤完成后，可以开始进行转换了。执行：
babel -d dist/ index.js
以上会把index.js文件转换的代码存放在当前目录的dist目录下。转换结果：
let add = item => item + 1 console.log(add(1)); // after convert :
"use strict"; var add = function add(item) { return item + 1; }; console.log(add(1));
转换后的代码可以在ie11中运行了。
以上这个小例子明白后，来看看第二个例子。
class Person { constructor( name ) { this.name = name; } sayHello() { return `Hello ${ this.name }!`; } sayHelloThreeTimes() { let hello = this.sayHello(); console.log(`${ hello } `.repeat(3)); } } new Person('ben').sayHelloThreeTimes()
这段代码同样没办法直接在ie11上运行，对这段代码进行类似第一个例子中的转换后，依然无法运行，提示如下：对象不支持“repeat”属性或方法
这里有很重要的一点值得关注，babel 中的 babel-preset-es2015 这条规则只会转换语法，却不会转换新的api 。而以上的字符串repeat方法是es6新增的api，ie11不支持这个特性，就报错了。
使浏览器支持新的api。这个需求很常用，通常的解决办法就是使用垫片库（polyfill），而在babel生态里边就有对应的垫片库，叫做babel-polyfill。首先下载：
npm install --save babel-polyfill
下载好了之后，使用这个垫片库有两种方式：
// 使用方式1：在新api所在的js中引入这个模块，如下： import 'babel-polyfill'; // 使用方式2：在html的头部引入 <script src="node_modules/babel-polyfill/dist/polyfill.js"></script>
可以这么理解，只要这个库被引入了，它就会自动往对应对象的原型上添加新api的定义，这样后续你直接在js中使用新的api，也就不会报错了。
虽然以上例子中的代码只有十多行，但是查看编译后的代码，能明显感觉到稍微复杂了一些
对于这样的代码感觉没法调试啊，里面的代码和自己写的代码都不一样的。解决办法是使用sourceMap，这个功能能将原来的代码与编译后的代码进行关联，虽然运行的是编译后的代码，但是里面代码的相对执行次序会反映到原来的代码上。在编译时多加一个参数：
babel -d dist/ index.js --source-maps
重新访问页面，调试窗口多出来一个文件，是可以在里面打断点进行调试的：
里面的代码就是编译前的代码了