zf-6-ast(20天)

1.js

let esprima = require(‘esprima’);//源代码转成AST语法树
let estraverse = require(‘estraverse’);//遍历语法树
let escodegen = require(‘escodegen’);//把AST语法树重新生成代码的工具
let sourceCode = ‘function ast(){}’;
let ast = esprima.parse(sourceCode);//源代码转成AST语法树
let indent =0;
function pad(){
return " ".repeat(indent);
}
estraverse.traverse(ast,{
enter(node){
console.log(pad()+node.type);
indent+=2;
},
leave(node){
indent-=2;
console.log(pad()+node.type);
}
});

2.js

let babel = require('@babel/core');//用来生成语法树并且遍历转换语法村
let t = require('babel-types');//用来生成新的节点，或者 判断某个节点是否是某个类型
const sourceCode = `const sum = (a,b)=>a+b`;

let transformArrayFunction = {
   
    //visitor可以访问源代码生成的语法树的所有的节点,捕获特定的节点
    visitor:{
   
        //捕获箭头函数表达式，然后转成普通函数
        ArrowFunctionExpression:(path,state)=>{
   
            let id = path.parent.id;//path.node代表当前节点 path.parent代表父节点
            let arrowNode = path.node;
            let params = arrowNode.params;
            let body = arrowNode.body;//BinaryExpression
            let generator = arrowNode.generator;
            let async = arrowNode.async;
            let functionExpression = t.functionExpression(id, params, 
            t.blockStatement([t.returnStatement(body)]),
            generator, async);
            path.replaceWith(functionExpression);
        }
    }
}
let result = babel.transform(sourceCode,{
   
    plugins:[transformArrayFunction]
});
console.log(result.code);

3.js

/**
1. 根据源代码生成语法树
2. 转换语法树
3. 根据语法树生成转换后的代码
把一个JSX的代码转成一个语法树
 */

let sourceCode = `let   element="hello"`;
/**
1.分词，把token拆开 词法分析，就是把代码转一个token流 其实就是一个token的数组
 */
function lexical(code){
   
   const tokens = [];
   //let element=<h1>hello</h1>
   for(let i=0;i<code.length;i++){
   
       let ch = code