AST 추상 구문 트 리 학습

Reference
AST 와 전단 공정 화 실전
AST 추상 문법 트 리 - 가장 기본 적 인 자바 script 중점 지식, 99% 는 전혀 모 릅 니 다.
13 개의 예시 빠 른 입문 JS 추상 문법 트 리
AST Explorer
https://astexplorer.net/
콘 셉 트
JavaScript 해석:

어법 분석 (Lexical Analysis): 자 바스 크 립 트 코드 (문자열) 의 문자 흐름 (char stream) 을 ECMAScript 표준 에 따라 기호 흐름 (token stream) 으로 변환 합 니 다.

문법 분석 (Syntactic Analysis): 품사 단원 흐름 을 요소 가 단계별 로 포 함 된 문법 구조 트 리 로 변환 합 니 다. AST

Demo
코드:
var AST = "is Tree";
품사 분석 = > 기호 흐름
Keyword: var
Identifier: AST
Punctuator: =
String: "is Tree"
Punctuator: ;
문법 분석 = > AST
AST 도구: Recast
해석 기 (recast. parse): code = > AST
Code Case 1

const recast = require("recast");
const code =
  `
  function add(a, b) {
    return a +
      //             
      b
  }
  `
const ast = recast.parse(code);
const add  = ast.program.body[0]

console.log(add)

Output Of Case 1

{
    "type": "FunctionDeclaration",
    "id": {
        "type": "Identifier",
        "name": "add"
    },
    "params": [
        {
            "type": "Identifier",
            "name": "a"
        },
        {
            "type": "Identifier",
            "name": "b"
        }
    ],
    "body": {
        "type": "BlockStatement",
        "body": [
            {
                "type": "ReturnStatement",
                "argument": {
                    "type": "BinaryExpression",
                    "operator": "+",
                    "left": {
                        "type": "Identifier",
                        "name": "a"
                    },
                    "right": {
                        "type": "Identifier",
                        "name": "b",
                        "comments": [
                            {
                                "type": "Line",
                                "value": "             ",
                                "loc": {},
                                "leading": true,
                                "trailing": false
                            }
                        ]
                    }
                }
            }
        ]
    },
    "generator": false,
    "expression": false,
    "async": false
}

금 형 제작 (recast. types. builders): AST = > 코드
Code Case 2
Code Case 1 코드 후 다음 코드 를 추가 하여 ast 를 재 조립 합 니 다.

add 방법 을 화살표 함수

로 변경 합 니 다.

squareSum 계산 제곱 과 방법 증가

//       ，    ，      “  ”
const { 
    variableDeclaration, 
    variableDeclarator, 
    identifier: id, 
    arrowFunctionExpression, 
    binaryExpression,
    blockStatement,
    returnStatement
 } = recast.types.builders

//            ，       ast  。
//  add        
ast.program.body[0] = variableDeclaration("const", [
  variableDeclarator(add.id, arrowFunctionExpression(
    add.params,
    binaryExpression('+', ...add.params)
  ))
]);

//   squareSum       
ast.program.body.push(variableDeclaration('var', [
    variableDeclarator(id('squareSum'), arrowFunctionExpression(
        [id('a'), id('b')],
        blockStatement([
            variableDeclaration('let', [
              variableDeclarator(id('c'), binaryExpression('*', id('a'), id('a'))),
              variableDeclarator(id('d'), binaryExpression('*', id('b'), id('b')))]),
            returnStatement(binaryExpression('+', id('c'), id('d')))
        ])
        
    ))
]))

// AST             
const output = recast.print(ast).code;

console.log(output)

Output Of Case 2

const add = (a, b) => a + b;

var squareSum = (a, b) => {
  let c = a * a, d = b * b;
  return c + d;
};

트 리 노드 옮 겨 다 니 기 (recast. types. visit)

recast.visit(ast, {
    visitExpressionStatement: function(path) {
        const { node} = path;
    },
    visitBlockStatement(path) {
        // do something here
    }
});

응용 장면

해석 기와 컴 파일 러

정적 코드 분석 (중복 코드 추출, 코드 유사 성 판단)

코드 변환

코드 포맷