在一些新框架的代码中,常基于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的更多相关文章

  1. Babel presets stage

    在一些新框架的代码中,常基于es6/7标准来书写代码.鉴于这些标准被没有被浏览器广泛支持,我们一般使用babel来将使用e6/7标准书写的代码降级编译(或者说转译)为浏览器可解析的es3/5代码. 以 ...

  2. babel ---- presets字段设定转码规则

    presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装. # ES2015转码规则 $ npm install --save-dev babel-preset-es2015 # re ...

  3. babel plugin和presets是什么,怎么用?

    https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/ 当开发react或者vuejs app时,开发者 ...

  4. babel分析

    现在都用 ES6 新语法以及 ES7 新特性来写应用了,但是浏览器和相关的环境还不能友好的支持,需要用到 Babel 转码器来转换成 ES5 的代码 相信大家都看到过如下的名词: babel-pres ...

  5. babel(一)

    一.babel npm babel src/index.js -d lib 二.@babel/core   @babel/cli @babel/core  转换语法核心 @babel/cli   执行 ...

  6. 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 ...

  7. 前端利器躬行记(2)——Babel

    Babel是一个JavaScript编译器,不仅能将当前运行环境不支持的JavaScript语法(例如ES6.ES7等)编译成向下兼容的可用语法(例如ES3或ES5),这其中会涉及新语法的转换和缺失特 ...

  8. 【前端】在Gulp中使用Babel

    Install $ npm install --save-dev gulp-babel babel-preset-es2015 用法1: const gulp = require('gulp'); c ...

  9. 何为babel / gulp

    Babel主要用来将新版本的javascript(ES6,ES7)编译为ES5,目前它对于新标准的支持程度甚至高于Chrome浏览器.通过引入预设babel-preset-react,babel还能解 ...

随机推荐

  1. NodeJs之pm2

    pm2 pm2是一个进程管理工具,可以用它来管理你的node进程,并查看node进程的状态,当然也支持性能监控,进程守护,负载均衡等功能. 开发过程中建议时不时的参看官方详细命令行使用:命令行 pm2 ...

  2. 移动先行之谁主沉浮? 带着你的Net飞奔吧!

    移动系源码:https://github.com/dunitian/Windows10 移动系文档:https://github.com/dunitian/LoTDotNet/tree/master/ ...

  3. 动手做第一个Chrome插件

    Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...

  4. 通过微信小程序看前端

    前言 2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众 ...

  5. C# salt+hash 加密

    一.先明确几个基本概念 1.伪随机数:pseudo-random number generators ,简称为:PRNGs,是计算机利用一定的算法来产生的.伪随机数并不是假随机 数,这里的" ...

  6. Android Studio-—使用OpenCV的配置方法和demo以及开发过程中遇到的问题解决

    前提: 1.安装Android Studio(过程略) 2.官网下载OpenCV for Android 网址:http:opencv.org/downloads.html 我下载的是下图的版本 3. ...

  7. SQLServer2005创建定时作业任务

    SQLServer定时作业任务:即数据库自动按照定时执行的作业任务,具有周期性不需要人工干预的特点 创建步骤:(使用最高权限的账户登录--sa) 一.启动SQL Server代理(SQL Server ...

  8. http协议(十一)http与https

    一.http的缺点 之前有介绍过http协议相关的一些知识,http是相当优秀和方便的,但它也有缺点,主要不足表现在如下几个方面: △ 通信使用明文(不加密),内容可能会被窃听 △ 不验证通信方的身份 ...

  9. ABP理论之CSRF

    返回总目录 本篇目录 介绍 ASP.NET MVC ASP.NET WEB API ASP.NET Core[以后补上] 客户端类库 内部原理 介绍 CSRF[Cross-Site Request F ...

  10. ASP.NET Web API 开篇示例介绍

    ASP.NET Web API 开篇示例介绍 ASP.NET Web API 对于我这个初学者来说ASP.NET Web API这个框架很陌生又熟悉着. 陌生的是ASP.NET Web API是一个全 ...