携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情
@babel/traverse
@babel/traverse 用来遍历和修改由 @babel/parser 解析出来的AST，它提供了一个 traverse 方法，这个方法有两个参数：
function traverse(parent,opts)
- 参数parent：指定要遍历的AST节点；
- 参数opts：指定visitor函数，Babel会在遍历parent对应的AST节点的时候调用相应的visitor函数。
enter和exit
参数opts是一个对象，前面讲到的节点类型就用在这里了，opts以节点类型名称作为属性，属性的值又是一个对象，这个对象中包含 enter 和 exit 两个方法。当进入到对应节点时调用 enter 方法，离开节点时则调用 exit 方法。
const parser = require('@babel/parser');
const traverse = require('@babel/traverse')
// 代码字符串
const code = `
const sayHi = () => {
console.log('hi')
}
`
const ast = parser.parse(code, {
sourceType: 'unambiguous'
});
traverse.default(ast, {
// 变量声明节点visitor
VariableDeclaration: {
enter(path, state) {
console.log('变量声明enter')
},
exit(path, state) {
console.log('变量声明exit')
}
},
// 箭头函数表达式visitor
ArrowFunctionExpression: {
enter(path, state) {
console.log('箭头函数enter')
},
exit(path, state) {
console.log('箭头函数exit')
}
}
})
上面的代码中，变量code保存的就是我们要用与parse的代码字符串，可以看出是一个函数表达式，我们把这个代码字符串放到可视化AST中，可以看到它的结构如下：
然后使用traverse遍历AST的时候，在上面的AST中会先遍历到VariableDeclaration然后再到ArrowFunctionExpression，所以执行上面的代码则会在控制台输入如下结果：
enter 和 exit 都有 path 和 state 这两个参数，path参数记录当前节点的一些信息，比如说 path.node.type 可以获取当前AST节点的类型，
