愚墨的博客
  • 首页
  • 前端技术
  • 面试
只争朝夕不负韶华
  1. 首页
  2. 前端框架
  3. React
  4. 正文

babel 6.0 的语法插件的作用

2016年12月30日 3367点热度 0人点赞 0条评论

这里只是简单的介绍一下babel中那些语法插件的作用包括以下几个

{
    "presets": [
      "es2015",
      "react",
      "stage-0",
      "stage-1",
      "stage-2",
      "stage-3"
    ],
    "plugins": []
  }

babel-preset-react 的作用是让其支持JSX的语法。

babel-preset-es2015 的作用是让其支持ES6的写法。

babel-preset-stage-0 的作用比较多(法力无边),因为它包含stage-1, stage-2以及stage-3的所有功能,同时还另外支持如下两个功能插件

  • transform-do-expressions   作用是让JSX可以使用if/else表达式
  • transform-function-bind  作用是 :: 来设置this的指向,比较实用

if-Else 在JSX中的具体用法为

const Component = props =>
  <div className='myComponent'>
    {do {
      if(color === 'blue') { <BlueComponent/>; }
      else if(color === 'red') { <RedComponent/>; }
      else if(color === 'green') { <GreenComponent/>; }
    }}
  </div>

同时要在.bablerc 文件中preset使用 stage-0 或者 在plugin中使用transform-do-expressions,语法要使用do{}

 

 

babel-preset-stage-1 除了包含stage-2和stage-3,还包含了下面4个插件

  • transform-class-constructor-call  支持class的构造函数
  • transform-class-properties               支持class的static属性
  • transform-decorators                            支持es7的装饰者模式即@符号引入的方法 (还在讨论中的特性,不完善)
  • transform-export-extensions            支持export方法

babel-preset-stage-2 包括stage-3的所有插件,额外还包括以下插件:

  • syntax-trailing-function-commas 支持尾逗号函数
  • transform-object-reset-spread 支持对象的解构赋值

babel-preset-stage-3  包括以下插件

  • transform-async-to-generator  支持async/await
  • transform-exponentiation-operator 支持幂运算符语法糖

 

标签: 暂无
最后更新:2017年12月06日

愚墨

保持饥渴的专注,追求最佳的品质

点赞
< 上一篇
下一篇 >

文章评论

取消回复

搜搜看看
历史遗迹
  • 2023年5月
  • 2022年9月
  • 2022年3月
  • 2022年2月
  • 2021年12月
  • 2021年8月
  • 2021年7月
  • 2021年5月
  • 2021年4月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年9月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年1月
  • 2019年5月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年9月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年11月
  • 2017年7月
  • 2017年6月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年6月
  • 2015年4月

COPYRIGHT © 2020 愚墨的博客. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS