preface

Babel is now a must-have in almost every project, but it works by parsing JS. In the process of creation, Babel had the engine Babylon, which early forked out the project Acron. Before we get to that, let’s look at what this engine is parsing out. Not only Babel but also Webpack use javascript Parser to convert code into an abstract syntax tree, which defines the code itself. By manipulating this tree, you can accurately locate assignment statements, declaration statements, and operation statements. If you are interested, you can follow my Github and click a star. thank you

What is an abstract syntax tree

Let’s look at a simple example:

var a = 1;
var b = a + 1;
Copy the code

We pass this website, he is an Esprima engine website, very easy to use. The flow chart is as follows:

His JSON object format looks like this:

{
    "type": "Program"."body": [{"type": "VariableDeclaration"."declarations": [{"type": "VariableDeclarator"."id": {
                        "type": "Identifier"."name": "a"
                    },
                    "init": {
                        "type": "Literal"."value": 1."raw": "1"}}]."kind": "var"
        },
        {
            "type": "VariableDeclaration"."declarations": [{"type": "VariableDeclarator"."id": {
                        "type": "Identifier"."name": "b"
                    },
                    "init": {
                        "type": "BinaryExpression"."operator": "+"."left": {
                            "type": "Identifier"."name": "a"
                        },
                        "right": {
                            "type": "Literal"."value": 1."raw": "1"}}}]."kind": "var"}]."sourceType": "script"
}
Copy the code

Numerous engines

Chrome has V8, Firefix has SpiderMonkey. Other commonly used engines are:

  • esprima
  • acron
  • Traceur
  • UglifyJS2
  • shift

Here are some engine speed comparisons, and how fast they load with different frameworks:

In my opinion, the better the package, the longer the parsing time, and the better the speed between engines is acron. Babel engine is the predecessor of fork project.

AST three-plate axe

  • Generate an AST using esprima
  • Traverse and update the AST via estrAverse
  • Regenerate the AST source code using EsCodeGen

Let’s do a simple example:

Create a test project directory. 2. Install the NPM modules of esprima, Estraverse, and EscodeGen under the Test project

npm i esprima estraverse escodegen --save
Copy the code

3. Create a new test.js file under the directory and load the following code:

const esprima = require('esprima');
let code = 'const a = 1';
const ast = esprima.parseScript(code);
console.log(ast);
Copy the code

You should see the output:

Script {
  type: 'Program'.body:
   [ VariableDeclaration {
       type: 'VariableDeclaration'.declarations: [Array].kind: 'const'}].sourceType: 'script' }
Copy the code

4. In the test file, load the following code:

const estraverse = require('estraverse');

estraverse.traverse(ast, {
    enter: function (node) {
        node.kind = "var"; }});console.log(ast);
Copy the code

Output results:

Script {
  type: 'Program'.body:
   [ VariableDeclaration {
       type: 'VariableDeclaration'.declarations: [Array].kind: 'var'}].sourceType: 'script' }
Copy the code

5. Add the following code to the test file:

const escodegen = require("escodegen");
const transformCode = escodegen.generate(ast)

console.log(transformCode);

Copy the code

Output results:

var a = 1;
Copy the code
  • Through these three boards axe: we willconst a = 1Transformed intovar a = 1

Feel without Babel 0.0

Recommendation site

Esprima source

Acron source

speed comparison

AST explorer

Esprima visualization

Online Visualization AST

conclusion

Abstract tree in front of a lot of a lot of popular tools, whether it is Webpack or Babel will go through the process of the three boards, here I just briefly introduce, after a period of time, will be an abstract tree syntax, interested in the source code can also take a look at esprima, why is esprima? Esprima has a lot of data, while ACron is lightweight. If you are interested, you can pay attention to my Github and remember to click “STAR” to support the author. Thank you.