# babel-plugin

three stage of Babel:

parse => transform => generate



#### parse

Lexical Analysis => syntactic Analysis



Lexical Analysis: string to tokens.

```
{
  type: {
    label: 'name',
    keyword: undefined,
    beforeExpr: false,
    startsExpr: true,
    rightAssociative: false,
    isLoop: false,
    isAssign: false,
    prefix: false,
    postfix: false,
    binop: null,
    updateContext: null
  },
  ...
}
```



syntactic Analysis: tokens to AST

```
    "body": [
      {
        "type": "ExpressionStatement",
        "start": 0,
        "end": 1,
        "loc": {
          "start": {
            "line": 1,
            "column": 0
          },
          "end": {
            "line": 1,
            "column": 1
          }
        },
        "expression": {
          "type": "Identifier",
          "start": 0,
          "end": 1,
          "loc": {
            "start": {
              "line": 1,
              "column": 0
            },
            "end": {
              "line": 1,
              "column": 1
            },
            "identifierName": "n"
          },
          "name": "n"
        }
      }
    ],
```





#### transform

traverse AST, adding、updating、removing



#### generate

traverse AST and building a string that represents the transformed code.



- babel-core
- babel-types



create AST tree

- VariableDeclaration
- template
- replaceWithSourceString