在一些新框架的代码中,常基于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. redux学习

    redux学习: 1.应用只有一个store,用于保存整个应用的所有的状态数据信息,即state,一个state对应一个页面的所需信息 注意:他只负责保存state,接收action, 从store. ...

  2. .Net Core MVC 网站开发(Ninesky) 2.3、项目架构调整(续)-使用配置文件动态注入

    上次实现了依赖注入,但是web项目必须要引用业务逻辑层和数据存储层的实现,项目解耦并不完全:另一方面,要同时注入业务逻辑层和数据访问层,注入的服务直接写在Startup中显得非常臃肿.理想的方式是,w ...

  3. Android-armebi-v7a、arm64-v8a、armebi的坑

    先来一波扫盲: armeabi:针对普通的或旧的arm v5 cpu armeabi-v7a:针对有浮点运算或高级扩展功能的arm v7 cpu(32位ARM设备) arm64-v8a:64位ARM设 ...

  4. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  5. JavaScript基础知识总结(一)

    当我们接触一种新语言时,首先要先了解它,对它有一定的理论认识. 那么,什么是JavaScript呢? JavaScript是一种脚本语言,由web浏览器进行解释和执行.它包括ECMAScript.DO ...

  6. JDBC MySQL 多表关联查询查询

    public static void main(String[] args) throws Exception{ Class.forName("com.mysql.jdbc.Driver&q ...

  7. SQL 约束

    先用设计器创建约束.再用代码创建约束.数据库约束是为了保证数据的完整性(正确性)而实现的一套机制见文件Employee.sql非空约束(选择复选框)主键约束(PK) primary key const ...

  8. 机器学习之sklearn——EM

    GMM计算更新∑k时,转置符号T应该放在倒数第二项(这样计算出来结果才是一个协方差矩阵) from sklearn.mixture import GMM    GMM中score_samples函数第 ...

  9. React单元测试——十八般兵器齐上阵,环境构建篇

    一个完整.优秀的项目往往离不开单元测试的环节,就 github 上的主流前端项目而言,基本都有相应的单元测试模块. 就 React 的项目来说,一套完整的单元测试能在在后续迭代更新中回归错误时候给与警 ...

  10. 【腾讯Bugly干货分享】微信iOS SQLite源码优化实践

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57b58022433221be01499480 作者:张三华 前言 随着微信iO ...