추상 구문 트리(AST)는 도대체 무엇입니까?

prettier, eslint, webpack, rollup, vite 등과 같은 프런트 엔드 도구에 대한 경험이 있는 프런트 엔드 엔지니어라면 AST를 배우는 것이 매우 편리할 수 있습니다. AST를 사용하여 할 수 있는 많은 일이 있습니다. 예를 들어 AST를 사용하여 작성한 변환기를 사용하여 원본 소스 코드를 수정하는 codemods을 작성하여 코드 베이스에서 원하지 않는 항목을 제거하는 데 사용할 수 있습니다. 또 다른 흥미로운 사용 사례는 writing a custom eslint plugin입니다. 자신만의 eslint 플러그인을 작성하려면 this blog을 확인하고 기존 eslint 구성 외부에 있는 새로운 eslint 규칙을 도입하는 데 사용할 수 있습니다.

왜 AST가 필요한가요?

eslint 또는 prettier 또는 webpack이 어떻게 작동하는지 궁금한 적이 있습니까? 그들은 우리가 작성한 코드를 수집하고 결과를 제공합니다. 이는 우리 코드의 수정된 버전이거나 우리가 작성한 코드의 경고/오류와 같은 다른 항목을 반환할 수 있습니다(린터 ). 그들은 우리가 작성하는 자바스크립트 코드에서 무언가를 조작하거나 하기 때문에 혼란스러울 수 있지만 그들 자신은 js로 작성됩니다. 이 개념을 프로그램이 다른 프로그램을 자신의 입력/데이터로 취급하는 메타 프로그래밍이라고 합니다. 문제를 분석하고 여기에서 AST가 들어오는 위치를 살펴보겠습니다.

js 코드를 변경하려면 js를 사용하여 이해할 수 있는 형식의 코드가 필요합니다.

이 형식에는 가져오기에서 변수 생성, js 파일에서 내보내기까지 모든 정보 권한이 있어야 합니다.

더 좋은 방법은 코드의 각 토큰에 대한 정보가 있는 시작 줄에서 바로 분기되는 트리 형식으로 표시하는 것입니다.

형식이 트리인 경우 javascript 개체로도 표시될 수 있습니다(노드를 부모의 속성으로 깊게 중첩).

따라서 우리는 우리가 제공한 코드를 살펴보고 코드의 트리/객체 표현을 반환해야 하는 파서를 가져야 합니다. 그러면 코드의 다른 토큰일 수 있는 다른 속성을 활용할 수 있습니다. 그 트리는 AST이고 이것이 우리가 그것을 필요로 하는 이유입니다.

파서

위에서 설명한 것처럼 코드의 AST를 얻으려면 파서가 필요합니다. 현재 많은 파서가 있습니다. 다음은 그 중 일부입니다.

babel

acorn

esprima

shift

각 파서에는 자체 AST 구현이 있습니다. babel 파서를 고려해 보겠습니다. 다음은 아래 자바스크립트 코드에서 생성된 트리입니다.

암호

let number = 10

코드에서 볼 수 있듯이 값 이름이 있는 변수 이름 번호가 있는 변수 선언이 있습니다. 다음은 해당 라인의 ast입니다.

코드용 AST

{
  type: "File",
  errors: [],
  program: {
    type: "Program",
    sourceType: "module",
    interpreter: null,
    body: [
      {
        type: "VariableDeclaration", // variable declaration
        declarations: [
          {
            type: "VariableDeclarator",
            id: {
              type: "Identifier",
              name: "number", // name of the variable
            },
            init: {
              type: "NumericLiteral",
              extra: {
                rawValue: 10,
                raw: "10", // value of that variable
              },
              value: 10,
            },
          },
        ],
        kind: "let", // declaration type
      },
    ],
    directives: [],
  },
  comments: [],
};

Ast explorer 사이트에서 다양한 파서를 가지고 놀고 각 파서에 대한 변환기를 작성할 수 있습니다. 파서가 AST를 생성하는 방법에 대한 게시물this을 확인할 수 있습니다.