- AST profile
AST (Abstract Syntax Tree) is a concept in compilation principle, which is an Abstract representation of source code syntax structure. It represents the syntactic structure of a programming language in the form of a tree, where each node represents a structure in the source code. For example, a section of JS code like this can be represented as the following structure:
function abs(number) { if (number >= 0) return number else return -number }
With an AST, we are no longer dealing with a string of text mixed with Spaces, but with a tightly structured tree structure. We can modify the code efficiently and precisely with the help of the machine through a series of operations on the nodes of the AST tree.
Ast-related technologies are used in a wide range of front-end scenarios (Babel, ESLint, code formatting, auto-completion, obtruse compression, Webpack, Typescript, various cross-end frameworks, and so on). It can be summarized as follows: when the code needs to be converted in batches according to certain rules. We can use the AST. The AST also has a lot to offer in code refactoring. The AST is an intelligent robot, and all we have to do is write its instructions. As long as we can figure out what the pattern is, no matter how much code there is, the robot can do it in minutes and make no mistakes.
- Babel profile
There are many libraries on the front end that can implement AST transformations, but here’s probably the most familiar one: Babel, which illustrates the basic flow of Babel’s work
Parse and Generate Babel both provide ready-made methods. The only thing developers need to care about is the transform process in the middle. There are only two core issues:
What code needs to be changed? To summarize the features of the code we need to modify, traverse the syntax tree with babel.traverse and cooperate with visitor to find the nodes we need to modify.
What are the modifications? You can add, delete, or modify nodes based on their paths based on rules based on actual requirements.
Here is a simple demo
const { parse } = require(“@babel/parser”); const traverse = require(“@babel/traverse”).default; const generate = require(“@babel/generator”).default;
Const code = function square(n) {return n * n; };
// parse source code generated AST const AST = parse(code, {/options/});
Traverse (AST, traverse(AST, traverse)) {// Access a node Identifier(path) of type by visitor {// Path represents a path to that node, If (path.node.name == ‘n’) path.node.name = ‘x’}})
// generate AST const output = generate(AST, {/options/}, code);
console.log(output.code) // function square(x) { return x * x; } 3. Learn three steps to get familiar with various js node types, syntax tree structure, ASTExplorer syntax tree structure quick overview to master Babel related concepts and API Babel plug-in development manual actual combat, specific problems specific analysis, In the process, you can refer to the implementation of Babel plug-in 4. AST is a powerful tool that hides the process of lexical and syntactic analysis, helping us to dig deep into the js language and make code more efficient and accurate. After mastering AST, you may feel the following: ———————————————— Copyright notice: This article is originally written BY CSDN blogger “Terry Zhang” under CC 4.0 BY-SA copyright agreement. Please attach the link of original source and this statement. The original link: blog.csdn.net/terrychinaz…