五分鐘瞭解抽象語法樹（AST）babel是如何轉換的？

抽象語法樹

什麼是抽象語法樹？

It is a hierarchical program representation that presents source code structure according to the grammar of a programming language, each AST node corresponds to an item of a source code.

抽象語法樹是源代碼語法結構的一種抽象表示。它以樹狀的形式表現編程語言的語法結構，樹上的每一個節點都表示源代碼中的一種結構

看不懂不要緊，抽象語法樹有不少章節，咱們不須要逐一瞭解

這篇文章會幫你創建起，抽象語法樹的印象

咱們只須要把目光聚焦於詞法分析(Lexical Analysis)和語法分析(Syntax Analysis)上，這兩步在轉換抽象語法樹過程當中扮演着極其重要的角色。

詞法分析 Lexical Analysis

也叫scanner(掃描器)，它讀取咱們的source code中你的每個字符，轉換成token（詞法令牌）, 最後，個人源代碼可能會被轉換成 list of tokens

input => const a = 5;
output => [{type: 'keyword', value: 'const', ...}, {type: 'identifier', value: 'a', ...}, {type: 'value', value: '5', ...}, ...]

語法分析 Syntax Analysis

也叫parser（解析器），將詞法分析器解析出的list of token，轉換成tree representation

input => [{type: 'keyword', value: 'const', ...}, {type: 'identifier', value: 'a', ...}, {type: 'value', value: '5', ...}, ...]
output => [{type: 'VariableDeclarator', declarations: {kind: 'const', type: 'Identifier', name: 'a'}, init: {type: 'Literal', value: '5'}, ...}]

最終，通過詞法分析和語法分析，咱們的代碼被轉換成了一個樹形節點

全部的樹形節點組合起來，就造成了concrete syntax tree（混合語法樹），該樹雖然和代碼並非100%匹配，但卻包含了足夠的信息使解析器可以正確的處理代碼

Babel

babel是一個js編譯器，他解析高版本es語法代碼，生成向後兼容的低版本js代碼。

how it works ？

在高層次上，babel解析分爲三步

parser => transform => generate

咱們將使用僞代碼分析每一步的輸入輸出目標

step 1: parser

import * as BabelParser from '***@babel/parser*';
  const code = ` const a = 5 `;
  const ast = BabelParser.parse(code);

首先，parser輸入源碼，輸出抽象語法樹ast

step 2: transform

import traverse from '***@babel/traverse***';
const new_ast = traverse(ast, {
  enter(path) {
    if (path.node.type === 'Identifier') {
      // do something transformal
    }
    ...
  }
});

而後, 結合babel preset，plugin，轉換上述ast，生成新的ast

step3: generate

import generate from '***@babel/generator***';
const newCode = generate(new_ast);

最後，根據新的語法樹ast，生成編譯後新的代碼

總結起來就是：

parser: source_code => ast
traverse: ast => new_ast
generate: new_ast => target_code

實際上，babel的轉換過程就是構建和修改抽象語法樹的過程。