在前端开发领域，AST（抽象语法树）是一个重要的概念。它是一种将代码解析成树形结构的一种数据结构。AST 可以帮助我们分析代码结构，进行代码转换，生成代码等操作。在 AST 的基础上，一些工具包也陆续被开发出来，帮助我们更加方便地处理代码。本文将介绍一个 npm 包——ast-parents 的使用教程。
一、什么是 ast-parents？
ast-parents 是一个可以查找 AST 节点的父节点的 npm 包。它可以较为方便地找到某个节点的所有祖先节点，以及相对位置。
二、如何使用 ast-parents？
在使用 ast-parents 之前，我们需要先准备好 AST。例如，我们使用 babel 解析一段代码：
import { add } from "./math.js";
function print(num1, num2) {
const res = add(num1, num2);
console.log(`The result of the calculation is ${res}.`);
}
print(2, 3);使用 babel 解析后得到 AST：
-- -------------------- ---- -------
-
------- -------
-------- --
------ ----
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- -
-
--
---------- -
------- ----------
------------- ---------
-------- --
------ ----
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- -
-
--
------- -
-
------- --------------------
-------- --
------ ---
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- --
-
--
------------- -
-
------- ------------------
-------- --
------ ---
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- --
-
--
----------- -
------- -------------
-------- --
------ ---
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- --
-
--
------- -----
--
-------- -
------- -------------
-------- ---
------ ---
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- --
-
--
------- -----
-
-
--
--------- -
------- ----------
-------- ---
------ ---
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- --
-
--
-------- ------------
------ ---------------
-
--
-
------- ----------------------
-------- ---
------ ---
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- -
-
--
----- -
------- -------------
-------- ---
------ ---
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- --
-
--
------- -------
--
------------ ------
------------- ------
-------- ------
--------- -
-
------- -------------
-------- ---
------ ---
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- --
-
--
------- ------
--
-
------- -------------
-------- ---
------ ---
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- --
-
--
------- ------
-
--
------- -
------- -----------------
-------- ---
------ ---
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- -
-
--
------- -
-
------- ----------------------
-------- ---
------ ---
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- --
-
--
--------------- -
-
------- ---------------------
-------- ---
------ ---
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- --
-
--
----- -
------- -------------
-------- ---
------ ---
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- -
-
--
------- -----
--
------- -
------- -----------------
-------- ---
------ ---
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- --
-
--
--------- -
------- -------------
-------- ---
------ ---
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- --
-
--
------- -----
--
------------ -
-
------- -------------
-------- ---
------ ---
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- --
-
--
------- ------
--
-
------- -------------
-------- ---
------ ---
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- --
-
--
------- ------
-
-
-
-
--
------- -------
--
-
------- ----------------------
-------- ---
------ ----
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- -
-
--
------------- -
------- -----------------
-------- ---
------ ----
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- -
-
--
--------- -
------- -------------------
-------- ---
------ ---
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- -
-
--
--------- -
------- -------------
-------- ---
------ ----
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- -
-
--
------- ---------
--
----------- -
------- -------------
-------- ---
------ ----
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- -
-
--
------- -----
--
----------- -----
--
------------ -
-
------- ------------------
-------- ----
------ ----
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- --
-
--
--------- -
-
------- ------------------
-------- ----
------ ----
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- --
-
--
-------- -
------ ---- ------ -- --- ----------- -- --
--------- ---- ------ -- --- ----------- -- -
--
------- -----
--
-
------- ------------------
-------- ----
------ ----
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- --
-
--
-------- -
------ ----
--------- ---
--
------- ----
-
--
-------------- -
-
------- -------------
-------- ----
------ ----
------ -
-------- -
------- --
--------- --
--
------ -
------- --
--------- --
-
--
------- -----
-
-
-
-
-
-
-
-
--
-
------- ----------------------
-------- ---
------ ----
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- --
-
--
------------- -
------- -----------------
-------- ---
------ ----
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- --
-
--
--------- -
------- -------------
-------- ---
------ ---
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- -
-
--
------- -------
--
------------ -
-
------- -----------------
-------- ---
------ ---
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- -
-
--
-------- --
------ ---
--
-
------- -----------------
-------- ---
------ ---
------ -
-------- -
------- --
--------- -
--
------ -
------- --
--------- --
-
--
-------- --
------ ---
-
-
-
-
--
------------- --------
--
----------- --
-1. 安装
在使用 ast-parents 之前，我们需要先安装它。使用 npm 安装，可以在项目根目录下运行：
npm install ast-parents
2. 导入
安装完成后，我们需要导入 ast-parents。在代码中使用：
const astParents = require('ast-parents');3. 查找节点
使用 ast-parents 查找节点很简单，只需调用 astParents 函数即可。例如，查找 AST 中 num1 的父节点：
const parentNode = astParents(ast, {
lineNumber: 3, // 起始行号
column: 15, // 起始列号
endLineNumber: 3, // 结束行号
endColumn: 19 // 结束列号
});这里我们的目标是 num1，所以起始和结束行、列号都在 num1 所在的位置。
4. 获取节点信息
查找到节点后，我们还可以获取节点的信息：
console.log(parentNode.node.type); console.log(parentNode.parent.type); console.log(parentNode.index);
这里的信息有该节点的类型、父节点的类型、该节点在父节点中的索引值等。
三、示例代码
本文提到的示例代码如下：
-- -------------------- ---- ------- ----- ----- - ----------------------- ----- ---------- - ----------------------- ----- ---- - ------- - --- - ---- ------------ -------- ----------- ----- - ----- --- - --------- ------ ----------------- ------ -- --- ----------- -- ------------ - -------- ----- ----- --- - --------------------- - ----------- --------- -------- --------------------------------------- --- ----- ---------- - --------------- - ----------- -- ------- --- -------------- -- ---------- -- --- ---------------------------------- ------------------------------------ ------------------------------
四、总结
ast-parents 是一个快速查找 AST 节点的 npm 包。在处理 AST 节点的时候，我们可以使用它来获取节点的父节点，以及相对位置等信息。ast-parents 的使用方法较为简单，可以轻松地集成到我们的项目中。在实际项目中，可以使用它来辅助我们快速地处理 AST，提高代码效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eeda7e2cebd9a1b02fbaae9