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