Babel和AST

Babel是一个代码转译工具，AST是将JS代码抽象成树的抽象语法树。

Babel可以通过它的工具链将js代码解析成AST，修改AST，将AST解析回js等功能。

所以我们可以通过Babel解析js代码，去看看AST到底是什么：

import { parse } from "@babel/parser"
const code = `let a = 'let'; let b = 2`
const ast = parse(code, { sourceType: 'module' })
console.log(ast)

这样控制台会输出code的ast

可以得知这个code的所有属性，ast就是这么一个东西，以树状的形式去描绘这段js代码。

通过查看ast得知，找到了一个叫VariableDeclaration的属性，变量声明
应该就是我们用的let a =’let’ 的ast了，打印出来看看

import { parse } from "@babel/parser"
import traverse from "@babel/traverse"
const code = `let a = 'let'; let b = 2`
const ast = parse(code, { sourceType: 'module' })
traverse(ast, {
  enter: item => {
    if(item.node.type === 'VariableDeclaration'){
      console.log(item);
    }
  }
})

发现有两个，kind都是’let’。就是我们要找的code了。

babel就像是螺丝刀一样，将js代码完完全全拆解展现出来了。

尝试使用babel去转译代码，将code里面的let全部转换成var，再将ast转换成js代码

import { parse } from "@babel/parser"
import traverse from "@babel/traverse"
import generate from "@babel/generator"
const code = `let a = 'let'; let b = 2`
const ast = parse(code, { sourceType: 'module' })
traverse(ast, {
  enter: item => {
    if(item.node.type === 'VariableDeclaration'){
      if(item.node.kind === 'let'){
        item.node.kind = 'var'
      }
    }
  }
})
const result = generate(ast, {}, code)
console.log(result.code)

成功将 const code = let a = 'let'; let b = 2 转换var了。

回看过程Babel的作用：

1. parse：把代码code变成AST
2. traverse：遍历AST进行修改
3. generate：把AST变成代码code2

通过这个操作，大概了解了Babel和AST了。