【JavaScript】Babel

项目如果用ES6（ES2015）来开发的话，考虑到当前浏览器的支持程度，还是需要把ES6编写的JS转换成ES5.1的JS文件，这里就要用到babel来进行转换了。

转码规则

当前babel提供如下几种专门规则

• es2015 （对应npm包 babel-preset-es2015）
• stage-0 （对应npm包 babel-preset-stage-0）
• stage-1 （对应npm包 babel-preset-stage-1）
• stage-2 （对应npm包 babel-preset-stage-2）
• stage-3 （对应npm包 babel-preset-stage-3）
• react （对应npm包 babel-preset-react）

设置

通过配置文件.babelrc来对babel进行配置，这个文件需要放在项目的根目录下，一般要自己生成，基本的格式如下：

{
  "presets": [],
  "plugin": []
}

preset字段设定转码规则，如es2015、stage-2这些，plugin设置插件

WebStorm的Babel设置

1. 给当前项目安装babel-cli包和babel-preset-es2015包
2. 当前项目根目录增加.babelrc文件，并设置"presets": ["es2015"]
3. WebStorm的File Watchers增加Bable配置，把Program设置为babel-cli包中的babel.cmd

按照上述设置完成之后，应该就有一个默认的把es6转译(transpile)成es5的行为了，一旦项目的js文件有变动，就会触发babel来把这些文件进行转译（默认结果生产到dist目录）