babel 6.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 支持幂运算符语法糖

babel 6.0 的语法插件的作用

文章评论