抽象语法树AST

136 阅读1分钟

AST抽象语法树,应用场景,babel,以及js如何被js解析器执行。

我们写的js代码

  function add(){

   return a+b; 

  }

是如何被浏览器识别并解析,

解析工具库recast

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)

打印结果如下:

函数被拆解成了如下的一个抽象树对象。

然后把抽象语法树重新组装成新的函数代码

// 引入变量声明,变量符号,函数声明三种“模具”
const {variableDeclaration, variableDeclarator, functionExpression} = recast.types.builders

// 将准备好的组件置入模具,并组装回原来的ast对象。
ast.program.body[0] = variableDeclaration("const", [
  variableDeclarator(add.id, functionExpression(
    null, // Anonymize the function expression.
    add.params,
    add.body
  ))
]);

//将AST对象重新转回可以阅读的代码
const output = recast.print(ast).code;

console.log(output)

打印结果

const add = function(a, b) { return a +b };

基于此原理,babel就可以将es6的语法转换为ES5的语法。

webpack

转自segmentfault.com/a/119000001…