前端工程化-抽象语法树（AST）

1.介绍

抽象语法树是源代码的抽象语法结构的树状表示，树上的的每个节点都表示一种源代码中的一种结构。利用astexplorer可以观察js代码:let a=’hello world’

2.利用Babel进行ast实战

将console.log,cosole.error输出内容替换，首先新建source.tsx

console.log(1)
function log() : number{
     console.debug('before')
     console.error(2)
     console.debug('after')
     return 0
}
log()
class Foo{
    bar():void{
        console.log(3)
    }
    render(){
        return ''
    }
}

之后安装babel插件，利用babel的parse，traver，generator处理source文件

const parser=require('@babel/parser')
const traverse=require('@babel/traverse').default
const generator=require('@babel/generator').default
const types=require('@babel/types')
const fs=require('fs')
const filename='source.tsx'
// 读取文件
const source=fs.readFileSync(__dirname+'/'+filename).toString()
// 转换ast
const ast=parser.parse(source,{
  plugins:  ['typescript','jsx']
})
console.log('ast',ast)
//walker
traverse(ast,{
    //访问者
    CallExpression(path){
        const calleeStr=generator(path.node.callee).code
        console.log('calleeStr',calleeStr)
        if(['console.log','console.error'].includes(calleeStr)){
            const {line,column}=path.node.loc.start
            path.node.arguments.unshift(types.stringLiteral(`${filename}(${line},${column})`))
        }
    }
})
const {code}=generator(ast,{
    filename
})
console.log('code:',code)

最终输出替换结果