Babel是现在前端项目广泛用到的一个转码器，它能将es5+编写的代码转码成浏览器能识别的es5。
这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。下面是一个例子。
// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
return item + 1;
});
上面的原始代码用了箭头函数，这个特性还没有得到广泛支持，Babel将其转为普通函数，就能在现有的JavaScript环境执行了。
安装步骤如下：
- 配置文件
Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。
该文件用来设置转码规则和插件，基本格式如下。
{
"presets": [],
"plugins": []
}
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。
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}
我的项目选择安装的是es2015和react。
- 在终端输入：
cnpm install babel-cli --save-dev
到这里，关于babel的基本配置就完成了。
举个实例：
1.在项目根目录下创建demo.js
let a = 5;
const b = 10;
let input = [1,2,3];
input.map(item => item+1);
- 因为我们现在是将babel安装到了当前目录下，所以不能直接在终端中babel转换命令，得使用npm来运行，在package.json中修改如下：
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
- 运行
npm run bulid
运行结果如下：
babel.png
也可以输出到指定的目录：
"scripts":{
"build":"babel demo.js --out-file bunder.js"
}
备注：如果运行失败，可以尝试 npm i重新下载依赖。
