项目如果用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设置
- 给当前项目安装babel-cli包和babel-preset-es2015包
- 当前项目根目录增加.babelrc文件,并设置"presets": ["es2015"]
- WebStorm的File Watchers增加Bable配置,把Program设置为babel-cli包中的babel.cmd
按照上述设置完成之后,应该就有一个默认的把es6转译(transpile)成es5的行为了,一旦项目的js文件有变动,就会触发babel来把这些文件进行转译(默认结果生产到dist目录)