babel presets stage-x
在一些新框架的代码中,常基于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的时候,可以根据业务要求、书写爱好、以及要兼容的浏览器及其版本来酌情设置
babel presets stage-x的更多相关文章
- Babel presets stage
在一些新框架的代码中,常基于es6/7标准来书写代码.鉴于这些标准被没有被浏览器广泛支持,我们一般使用babel来将使用e6/7标准书写的代码降级编译(或者说转译)为浏览器可解析的es3/5代码. 以 ...
- babel ---- presets字段设定转码规则
presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装. # ES2015转码规则 $ npm install --save-dev babel-preset-es2015 # re ...
- babel plugin和presets是什么,怎么用?
https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/ 当开发react或者vuejs app时,开发者 ...
- babel分析
现在都用 ES6 新语法以及 ES7 新特性来写应用了,但是浏览器和相关的环境还不能友好的支持,需要用到 Babel 转码器来转换成 ES5 的代码 相信大家都看到过如下的名词: babel-pres ...
- babel(一)
一.babel npm babel src/index.js -d lib 二.@babel/core @babel/cli @babel/core 转换语法核心 @babel/cli 执行 ...
- babel-preset-env: a preset that configures Babel for you
转载 babel-preset-env is a new preset that lets you specify an environment and automatically enables t ...
- 前端利器躬行记(2)——Babel
Babel是一个JavaScript编译器,不仅能将当前运行环境不支持的JavaScript语法(例如ES6.ES7等)编译成向下兼容的可用语法(例如ES3或ES5),这其中会涉及新语法的转换和缺失特 ...
- 【前端】在Gulp中使用Babel
Install $ npm install --save-dev gulp-babel babel-preset-es2015 用法1: const gulp = require('gulp'); c ...
- 何为babel / gulp
Babel主要用来将新版本的javascript(ES6,ES7)编译为ES5,目前它对于新标准的支持程度甚至高于Chrome浏览器.通过引入预设babel-preset-react,babel还能解 ...
随机推荐
- 学习AOP之深入一点Spring Aop
上一篇<学习AOP之认识一下SpringAOP>中大体的了解了代理.动态代理及SpringAop的知识.因为写的篇幅长了点所以还是再写一篇吧.接下来开始深入一点Spring aop的一些实 ...
- Android 获取系统相册中的所有图片
Android 提供了API可获取到系统相册中的一些信息,主要还是通过ContentProvider 来获取想要的内容. 代码很简单,只要熟悉ContentProvider 就可以了. public ...
- Carousel 旋转画廊特效的疑难杂症
疑难杂症 该画廊特效的特点就是前后元素有层级关系. 我想很多人应该看过或者用过这个插件carousel.js,网上也有相关的教程.不知道这个插件的原型是哪个,有知道的朋友可以告诉我. 该插件相对完美, ...
- UE4新手引导入门教程
请大家去这个地址下载:file:///D:/UE4%20Doc/虚幻4新手引导入门教程.pdf
- jquery屏幕滚动计算事件总结
获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度: $(docume ...
- css知多少之绝对定位小记
一.position定位常见属性 对于属性position来说,属性值有static/relative/absolute/fixed/inherit以下只对绝对定位position:absolute详 ...
- Android MVP+Retrofit+RxJava实践小结
关于MVP.Retrofit.RxJava,之前已经分别做了分享,如果您还没有阅读过,可以猛戳: 1.Android MVP 实例 2.Android Retrofit 2.0使用 3.RxJava ...
- Linux监控工具介绍系列——OSWatcher Black Box
OSWatcher Balck Box简介 OSWatcher Black Box (oswbb)是Oracle开发.提供的一个小巧,但是实用.强大的系统工具,它可以用来抓取操作系统的性能指标,用 ...
- Linux的locale、LC_ALL和LANG
如果你是一个Linux新手,并且刚刚安装了一个新的英文系统但想要设置成中文系统,肯定会接触到上面几个变量,在网上搜索了一系列解决方法,给一些变量赋一下值,再export一下,或者写到配置文件里面,然后 ...
- Ubuntu下利用Mono,Jexus搭建Asp.Net(MVC) Web服务器
最近在Ubuntu上搭建了Asp.Net的Web服务器,其中遇到很多问题,整理一下思路,以备后用. 搭建环境以及配套软件 Ubuntu: 11.10 Mono:3.0.6 下载地址(http://do ...