babel-traverse之經常使用api

babel-traverse是一個對ast進行遍歷的工具。相似於字符串的replace方法，指定一個正則表達式，就能對字符串進行替換。只不過babel-traverse是對ast進行替換。
使用ast對代碼修改會更有優點，支持各類語法匹配模式，好比條件表達式、函數表達式，while循環等。前提是代碼是符合js、ts語法的。
官方文檔地址 https://babeljs.io/docs/en/ne...
首先經過babel-parse將字符串轉化爲ast，就能夠對ast進行遍歷了，好比想要尋找全部的function就能夠這麼寫。

const parser = require('@babel/parser')
const t = require('@babel/types')
const traverse = require('@babel/traverse').default

let code = 'function a() {}'
const ast = parser.parse(code)
traverse(ast, {
  FunctionDeclaration(path) {
    const node = path.node
    // 獲取函數名稱等
    path.replaceWith()//替換爲新的節點
    path.remove() // 刪除當前節點
    path.skip() 跳過子節點
    let copyNode = t.cloneNode(node)//複製當前節點
    traverse(copyNode, {}, {}, path)// 對子樹進行遍歷和替換，不影響當前的path
  }
})

接下來若是想要對某些函數進行替換，就須要使用path這個參數，比較經常使用的是replaceWith方法，能夠將當前節點替換爲新的節點。也能夠拿到node變量，直接修改，具體使用哪一種形式，還要看須要替換爲何內容。
#path.skip()
由於ast是一顆樹，若是須要跳過對子樹的遍歷，就能夠使用skip方法，常見的狀況是已經找到了對應的節點，就沒有必要再遍歷子樹了。
#path.replaceWith（）
不得不提的是@babel/types這個包，replaceWith的參數就能夠經過babel/types來獲取，好比須要將function修改成一個遍歷申明，能夠這樣寫

let newNode = t.variableDeclaration(
'let', [t.variableDeclarator(t.identifier('a'), t.stringLiteral('123'))]
)
path.replaceWith(newNode)

這樣function a就變成了 let a = '123'
最後能夠經過@babel/generator將ast輸出爲字符串，就能夠看到修改的效果了。

const output = generate(ast, {}, code)