在一些新框架的代码中,常基于es6/7标准来书写代码。鉴于这些标准被没有被浏览器广泛支持,我们一般使用babel来将使用e6/7标准书写的代码降级编译(或者说转译)为浏览器可解析的es4/5代码。
以.babelrc文件配置babel为例,presets预设编译规则(预设的编译插件集合)可以设置stage-0 至 stage-3, stage-0包含了stage-1 至 stage-3,也就是说如果设置为stage-0,stage-1 至 stage-3的编译功能默认都有了。
stage-0 至 stage-3代表了es标准支持的不同阶段。0阶段是最初级的阶段,可以理解为仅仅才开始讨论标准, 换句话说就是基本没有什么浏览器支持es新标准。3表示成熟阶段,意味着主流浏览器的新版本都支持大部分新标准,基础的es新标准特性不需要降级编译为es5,浏览器即可原生支持。
stage-3包括以下插件:
transform-async-to-generator 支持async/await
transform-exponentiation-operator 支持幂运算符语法糖
stage-2包括stage-3的所有插件,额外还包括以下插件:
syntax-trailing-function-commas 支持尾逗号函数,额...很鸡肋
transform-object-reset-spread 支持对象的解构赋值
stage-1包括stage2所有插件,额外还包括以下插件:
transform-class-constructor-call 支持class的构造函数
transform-class-properties 支持class的static属性
transform-decorators 支持es7的装饰者模式即@符号引入的方法 (还在讨论中的特性?)
transform-export-extensions 支持export方法
stage-0包括stage1所有插件,额外还包括以下插件:
transform-do-expressions 支持在jsx中书写if/else
transform-function-bind 支持::操作符来切换上下文,类似于es5的bind
每个插件所支持的特性在代码上的具体体现可查看es6/7标准等详细资料,或babel官方站点,
在实际配置babel的时候,可以根据业务要求、书写爱好、以及要兼容的浏览器及其版本来酌情设置
原文:http://www.cnblogs.com/rock-roll/p/6250149.html