每天一个前端名词——Babel

1.Babel 介绍

诞生背景

随着ES6的推进，我们开始逐渐使用ES6语法，但目前并非所有浏览器都支持ES6语法，为了将ES6转换为现有浏览器能理解的语法，Babel诞生了。

如果你还不是很了解ES与JS的关系，可看：JavaScript与ECMAScript的关系

介绍

Babel是一款js转码器，他将新版本的js语法标准转换为现阶段通用的js语法标准。在目前的情况下，可以简单认为Babel主要将ES6代码转为ES5代码。

下面我们简单举一个例子：

在ES6 里面我们可以这样写：

`[1,2,3].map(n => n + 1);`

利用Babel，我们可以将上面的代码转为ES5代码，结果如下：

[1,2,3].map(function(n) {
  return n + 1;
});

其实Babel官网的Slogan就很好的阐释了它的作用：

>Use next generation JavaScript, today.

2.Babel 配置

使用Babel的方法有很多，你可以在官网查看Setup,在这里，我们使用babel-cli工具用于命令行转码。步骤如下：

1. 首先，我们需要在我们的项目中安装babel-cli,用命令行工具打开你的项目敲入：npm install --save-dev babel-cli.稍后你能在你的package.json中看到：

   {
     "devDependencies": {
       "babel-cli": "^6.8.0"
     }
   }

2. 接下来，我们在package.json中加入一下代码。这一段代码的作用就是当执行build命令时运行babel src -d lib，即将src文件夹中的文件通过babel转换的结果，放到lib文件夹中。

    "scripts": {
     "build": "babel src -d lib"
    },

3. 由于在Babel6.x版本中你需要自己明确指出转码规则，Babel不再默认提供。因此，在命令行中运行npm install babel-preset-es2015 --save-dev,你也可以选择其他的转码规则。

4. 最后.babelrc文件告诉babel我们要用哪一个preset以及相应的插件。通过第三步我们明确了要使用"es2015"转码规则。因此，在命令行中输入
   echo '{"presets":["es2015"]}' > .babelrc.可以看到在项目的.babelrc中出现一下代码：{"presets":["es2015"]}

3. 实践

在配置完Babel之后，我们写一小段代码测试一下。我们在src/person.js中写入以下代码：

class Person {
constructor(name) {
    this.name = name;
}
greet(){
    return this.name + ' says hello. ';
    }
}

console.log(new Person("cindy").greet());

然后在命令行中运行npm run build.可以看到lib/person.js已经是ES5代码了。我们不用管经过Babel转换后最后输出的代码是什么样的，只用专注于用ES6写出的代码就行。

最后，我们在index.html中引入lib/person.js就能看到控制台中输出“cindy says hello.”

当把index.html中引入的js文件的地址改为src/person.js时，在Chrome控制台中仍能输出以上信息。因为部分浏览器已经支持ES6语法。你可以在这里查询浏览器支持情况。

4.总结

• Babel是将下一代ES规则转为现在大多数浏览器所支持的ES规则的转换器。

• 通过命令行配置Babel的过程如下：安装-设置scripts-明确转码规则(preset)-配置.babelrc

5. 参考资料

• http://es6.ruanyifeng.com/#docs/intro#Babel转码器

• https://laracasts.com/series/es6-cliffsnotes/episodes/1