【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目录)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容