关于Babel

Babel是一个广泛使用的转码器，可以将es6代码转为es5代码，从而在现有环境中执行。

这意味着，我们可用ES6编写程序，而不用担心现有环境是否支持。下面是一个例子:

var users={
    admin:'123',
    zhangsan:'456',
    hanmeimei:'135'
}
process.stdout.write("请输入用户名：\n");
var flag = null;
process.stdin.on('data',(data)=>{
    var name = Object.keys(users);
    var input = data.toString().trim();
    if(!flag){//用户名校验
        if( name.indexOf(input)!=-1){//输入正确
            console.log("请输入密码:");
            flag = input;
            input = "";
        }else{
            console.log("err,请重新输入用户名");
            input = "";
        }
    }else{//密码校验
        if(users[flag]==input){
            console.log("恭喜通过验证");
        }else{
            console.log("err，请重新输入密码");
        }
    }
 });

上面的代码中用到箭头函数，这个特性还没有得到广泛支持，Babel将其转为普通函数，就能在现有的JavaScript环境执行了。

webStrom中的ES6和ES5转化(下面windows为例)

file->settings->Lauguages&Framesworks->javascript,选择es6，确定。

使用babel步骤：

1. 首先首先在根目录新建一个package.json。

   {
     "name": "test-project",
     "version": "1.0.0",
   /*  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-preset-es2015": "^6.18.0"
     }*/
   }
   

2. 在项目根目录新建 .babelrc文件（babel的配置文件）。该文件用来设置转码规则和插件，基本格式如下：

   {
     "presets": [
    "es2015"
     ],
     "plugins": []
   }
   

3. 打开控制台，安装babel-cli,命令如下（此处是本地安装，也可以全局安装）：

   $npm install –save-dev babel-cli

4. file->settings->Tools->file Watchers->…

Program那一项，填$项目根目录/node_modules/.bin/babel.cmd

1. but,选择只是完成了自动转换功能，系统默认把ES6 compile成了ES6.（也就是说，compile出来的东西跟原来的一样.Generator函数并没有被转换成ES5的格式）。so，我们还需要安装Babel的preset以正确识别ES6代码（全局安装会报错：Error: Couldn’t find preset “es2015” relative to directory “C:\Users\Administrator\Desktop\test”，没找到原因，请指教）。

   $npm install –save-dev babel-preset-es2015 搞定^_^，回到你的js文件，直接使用es6语法，保存后会项目根目录生成dist文件夹，包含.js和.js.map文件。

参考1：http://www.ruanyifeng.com/blog/2016/01/babel.html

参考2：https://www.zhihu.com/question/43414079/answer/95642131