preface

The AST abstract syntax tree was briefly described in a simple AST abstract syntax tree article. Today we’ll look at how ES6 is converted to ES5 in Babel.

Babel package introduction

  • Babel-core: Core package that provides a translation API for translating code. For example the Babel. The transform. Babel-loader is implemented through this package in Webpack.
  • Babylon: The lexical parser for Babel. The original code is read and analyzed letter by letter like a scanner to produce the AST syntax tree structure.
  • Babel-traverse: Traverse the AST.
  • Babel-generator: Generates new code from the new AST syntax tree.
  • Babel-types: Nodes used to validate, build, and change the AST tree
  • Babel-template: Helper function for building AST tree nodes from string code
  • Babel-helpers: a set of prefabricated babel-template functions that are used by plugins
  • Babel-code-frames: Used to generate error messages, print error error source frames, and indicate error locations
  • Babel-plugin-xxx: a plug-in used during Babel translation, where babel-plugin-transform-xxx is used by the transform step.
  • Babel-preset – XXX: a set of plugins to be used in the transform stage.
  • Babel-polyfill: a shim for native objects and apis added to the JS standard, which is implemented as a wrapper around core-JS and Regenerator-Runtime packages.
  • Babel-runtime: functions like babel-polyfill and is commonly used in libraries or plugins because it does not pollute the global scope.

The conversion process

The conversion process is divided into three steps:

1. The Parser

The first step is primarily to parse the ES6 syntax into an AST abstract syntax tree. In simple terms, it is the object of breaking up code into particles. This step is done primarily through the Babylon plug-in.

2. The Transformer transformation

The second step is to pass the broken AST syntax through plugins (babel-traverse traverse AST) and presets (ES2015 / ES2016 / ES2017 / env/stage-0 / stage-4) Env is the latest standard. Stage-0 and stage-4 are experimental versions.) To the new AST syntax. This step is mostly done by the babel-Transform plug-in. Plugins and presets are usually configured in.babelrc files.

3. The Generator to generate

The third step is to regenerate the new AST syntax tree object into an ES5 syntax that browsers can recognize. This step is mostly done by the Babel-Generator plug-in.

case

A simple example is the ES6 syntax let in the code block let a = 10. The conversion process is as follows:

  1. Code blocks are parsed into AST syntax trees using the online ASTExplorer.
{
  "type": "Program",
  "start": 0,
  "end": 10,
  "body": [
    {
      "type": "VariableDeclaration",
      "start": 0,
      "end": 10,
      "declarations": [
        {
          "type": "VariableDeclarator",
          "start": 4,
          "end": 10,
          "id": {
            "type": "Identifier",
            "start": 4,
            "end": 5,
            "name": "a"
          },
          "init": {
            "type": "Literal",
            "start": 8,
            "end": 10,
            "value": 10,
            "raw": "10"
          }
        }
      ],
      "kind": "let"
    }
  ],
  "sourceType": "module"
}
Copy the code
  1. Put the ES6 syntax in the AST syntax tree object aboveletreplacevar.
  2. The new syntax tree generates new codevar a = 10.