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还能解 ...
随机推荐
- 探真无阻塞加载javascript脚本技术,我们会发现很多意想不到的秘密
下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问 ...
- 【Win 10 应用开发】在App所在的进程中执行后台任务
在以往版本中,后台任务都是以独立的专用进程来运行,因此,定义后台任务代码的类型都要位于 Windows 运行时组件项目中. 不过,在14393中,SDK 作了相应的扩展,不仅支持以前的独立进程中运行后 ...
- nodejs进阶(1)—输出hello world
下面将带领大家一步步学习nodejs,知道怎么使用nodejs搭建服务器,响应get/post请求,连接数据库等. 搭建服务器页面输出hello world var http = require ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(71)-微信公众平台开发-公众号管理
系列目录 思维导图 下面我们来看一个思维导图,这样就可以更快了解所需要的功能: 上一节我们利用了一个简单的代码例子,完成了与微信公众号的对话(给公众号发一条信息,并得到回复) 这一节将讲解公众号如何设 ...
- javascript函数
array.sort(function(a, b){ return a -b ; } ) 把数组 array 按照从小到大排序. [11, 22, 586, 10, -58, 86].sort(f ...
- 使用po模式读取豆瓣读书最受关注的书籍,取出标题、评分、评论、题材 按评分从小到大排序并输出到txt文件中
#coding=utf-8from time import sleepimport unittestfrom selenium import webdriverfrom selenium.webdri ...
- RabbitMQ + PHP (二)AMQP拓展安装
上篇说到了 RabbitMQ 的安装. 这次要在讲案例之前,需要安装PHP的AMQP扩展.不然可能会报以下两个错误. 1.Fatal error: Class 'AMQPConnection' not ...
- BPM嵌入式流程解决方案分享
一.需求分析由于企业业务的独特性或者企业高层独特的管理思想,很多客户选择了自行开发业务系统的方式来实现独有的竞争力. 这类信息系统通常经过了多年的开发,伴随着企业的发展一直在不断优化,与企业的业务非常 ...
- NPM如何更新到最新版
参考文章--npm更新到最新版本的方法 其实我们可以这样,随便新建一个文件夹例如:F:\test.按着"shift"键,右键该文件夹,选择"在此处打开命令窗口(W)&qu ...
- Android中Activity的四大启动模式实验简述
作为Android四大组件之一,Activity可以说是最基本也是最常见的组件,它提供了一个显示界面,从而实现与用户的交互,作为初学者,必须熟练掌握.今天我们就来通过实验演示,来帮助大家理解Activ ...