In my spare time I wrote a series of articles called Bobabylon -AST. This is the first of three to follow. Send them all together today while you can.

Recently, I wanted to study react to small program code, but I felt it was a bit too big. Because I usually write some VUE code, and VUE is more similar to small program, so I first made a VUE to small program PoC. But that’s not the point. The point is to learn and use Babylon’s AST in the process. Because it is the first time to contact, so I want to write some notes to record, also hope to give you a little reference.

The code is written, must be written more practice, so I here or the example code is given priority to, the point involved is also used in the VUE to small program, or is the basis of conversion. But there will be a lot of knowledge beyond this range, we will not do a specific discussion here, here gives some reference materials, we can refer to.

Reference materials involved:

  1. AST Explorer: https://astexplorer.net/ Artifact, reading and writingASTThe operation depends on it
  2. Babel Plugin Handbook https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md I found a few hereAPI
  3. Babylon and Babel – traverse by https://github.com/xtx1130/blog/issues/7 are not explanation, but see early, be enlightenment article
  4. Babel types generated code will be used at https://babeljs.io/docs/core-packages/babel-types/

AST Explorer looks at the code

First go to https://astexplorer.net/ and type 1 directly into the code to see the basic effect.

All we need to do is convert the code. We just need to care about the program. Body part.

As shown above, there is only one ExpressionStatement in the program code. Click + to expand, you can see the internal details, as shown below:

The internal structure has only one Literal, which is very simple. More complex code will be explained later.

CRUD of AST (create-retrieve-update-delete)

1. Create

In fact, Create is a relatively complex operation, and is usually used in conjunction with Retrieve and Update. You can choose the order of reading according to your actual needs.

First, build an empty Node project, and then expand based on that project.

npm install babylon @babel/types @babel/generator @babel/traverse
Copy the code

The test code

const babylon = require('babylon')
const t = require('@babel/types')
const generate = require('@babel/generator').default
const traverse = require('@babel/traverse').default

const code = ' '
const ast = babylon.parse(code)
// manipulate ast
const output = generate(ast, {}, code)  
console.log('Input \n', code)
console.log('Output \n', output.code)
Copy the code

Since this is an empty code, there is no Output for Input or Output, just a code structure.

To construct a1The code of

Based on the two figures above, only code 1 consists of an ExpressionStatement with a Literal embedded inside. The direct code is as follows, please refer to the comments.

const code = ' 'Const ast = baby.parse (code) // Generate literal const literal = t.numericLiteral(1) // Generate expressionStatement const exp = Ast.program.body. push(exp) const output = generate(ast, {}, code) console.log('Input \n', code)
console.log('Output \n', output.code)
Copy the code

Run the output

Input

Output
 1;
Copy the code

This example uses t(babel-types) first. Can check my document at https://babeljs.io/docs/core-packages/babel-types/. T contains methods such as type judgment and instance generation. For example, t.expressionStatement(literal) generates an ExpressionStatement, This function will use the parameters of the (https://babeljs.io/docs/core-packages/babel-types/#expressionstatement) is described in the documents, but documents really not good-looking, Look for the corresponding method in the AST Explorer and see a parameter in the document:

structureconst a = 1The code of

The code for 1 above is too simple. Let’s generate code for const a = 1. Enter const a = 1 into the AST Explorer and view the syntax tree as shown below:

VariableDeclaration, VariableDeclarator, Identifier, Literal several babel-types are involved in this code. Literal uses NumericLiteral. At this point, you can view the document separately, such as VariableDeclaration

This t.variableDeclaration takes two arguments kind and declarations, and the second argument is an array.

Based on the syntax tree, the generated code for each layer is as follows:

const code = ' 'Const ast = Babylon. Parse (code) // Generate VariableDeclarator const ID = T.i dentifier('a') const literal = t.numericLiteral(1) const declarator = t.variableDeclarator(id, Literal) // Generate VariableDeclaration const declaration = t.variableDeclaration(const declaration = t.variableDeclaration)'const'// Array.program.body. Push (declaration) const output = generate(ast, {}, code) console.log(declarator)'Input \n', code)
console.log('Output \n', output.code)
Copy the code

The result is as follows:

Input

Output
 const a = 1;
Copy the code

Createconclusion

The AST Explorer can generate code perfectly. The common exception is that parameters are not filled in correctly, especially arrays. This can be avoided by combining API documentation with small code snippets.

Finally, generate a slightly more complex code.

function add(a, b) {
  return a + b
}
Copy the code

AST tree as follows

If you are interested, you can first try to write according to the syntax tree prompts, and then look at the comparison code below, if you understand the above, it is really not difficult to write this.

const code = ' '
const ast = babylon.parse(code)

// BinaryExpression a + b
const binaryExp = t.binaryExpression('+', t.identifier('a'), t.identifier('b'))
const returnStatement = t.returnStatement(binaryExp)

// function body
const fnBody = t.blockStatement([returnStatement])
const params = [t.identifier('a'), t.identifier('b')]

const fnDeclaraton = t.functionDeclaration(t.identifier('add'), params, fnBody)
ast.program.body.push(fnDeclaraton)

const output = generate(ast, {}, code)
console.log('Input \n', code)
console.log('Output \n', output.code)
Copy the code

Above, that is the introduction to THE Create of AST. If you want to learn more, then read the next few articles