\@babel|traverse使用教程

资源

官方文档：https://babeljs.io/docs/babel-traverse 🔗

K哥文章：https://mp.weixin.qq.com/s/fIbPuNMs5FRADJE5MOZXgA 🔗

说明

安装命令: npm install --save @babel/traverse

@babel/traverse是babel的核心组件之一，需要与@babel/types库结合使用，用于维护AST语法树状态，并负责替换、删除和添加节点。

使用方式

包引入：const traverse = require("@babel/traverse").default

使用：traverse(ast, visitor)

其中visitor是访问者对象，有如下几种写法：

1. 使用types中的节点类型匹配：

const visitor = {
    NumericLiteral(path) {
    },
    StringLiteral(path) {
    }
}

2. 如果多个类型同时匹配并处理可使用|符号拼接类型

const visitor = {
    "NumericLiteral|StringLiteral"(path) {
    }
}

3. 统一入口循环自行匹配

const t = require("@babel/types")
const visitor = {
    enter(path) {
        if (t.isNumericLiteral(path.node)) {
        }
        if (t.isStringLiteral(path.node)) {
        }
    }
}

API

匹配中返回path变量，其中常用的api需要关注

path.stop()

停止整个遍历过程，包括父路径的遍历。

path.skip()

停止当前路径的遍历，但继续遍历父路径。

path.remove()

从父路径中移除当前路径

path.insertBefore(nodes)

在当前路径前插入新的节点。

path.insertAfter(nodes)

在当前路径后插入新的节点。

path.traverse(visitor)

在当前路径及子路径进行遍历匹配。

path.get(key)

获取当前路径的子路径，key 是子路径的标识符。

path.parent/path.parentPath

获取当前路径的父路径。

path.node

获取当前路径表示的 AST 节点。

path.replaceWith(node)

用新的 AST 节点替换当前路径表示的节点。

path.replaceWithMultiple(nodes)

与replaceWith功能类似区别是可以将多个AST节点替换当前路径的节点

path.replaceInline(node/nodes)

将replaceWith与replaceWithMultiple整合成一个api，通过内部判断传入的一个还是多个节点选择对应的api