npm 包 js-ast-query 使用教程

什么是 js-ast-query?

js-ast-query 是一个基于 AST（抽象语法树）的 JavaScript 代码查询库，它允许开发者使用自定义查询器查询 JavaScript 代码，并返回匹配的节点信息。

安装

可以通过 npm 安装 js-ast-query，使用以下命令即可：

npm install --save js-ast-query

使用

解析代码

使用 js-ast-query 之前，需要将 JavaScript 代码解析成 AST。可以使用 acorn 解析器来完成这个过程，也可以使用其他解析器库。

const acorn = require('acorn');
const code = `
  function add(a, b) {
    return a + b;
  }
`;
const ast = acorn.parse(code, { ecmaVersion: 2020 });

查询节点

使用 js-ast-query 提供的查询器进行查询。下面是一个例子，它查询 add 函数声明并返回它的名称。

const { query } = require('js-ast-query');

const result = query(ast, {
  type: 'FunctionDeclaration',
  id: { type: 'Identifier' },
}).map((node) => node.id.name)[0];
console.log(result); // 'add'

以上代码中，query 函数接受两个参数：AST、查询器。查询器是一个 JavaScript 对象，js-ast-query 会遍历 AST 并在每个节点上执行查询器，找到匹配的节点并返回。

自定义查询器

在 js-ast-query 中，查询器是一个 JavaScript 对象，它指定了要查询的节点类型及其属性。使用自定义查询器，可以实现非常复杂的查询逻辑。

下面是一个例子，它查询 add 函数定义并返回函数体:

const { query } = require('js-ast-query');

const result = query(ast, {
  type: 'FunctionDeclaration',
  id: { name: 'add' },
  body: { type: 'BlockStatement' },
}).map((node) => node.body)[0];
console.log(result); // { type: 'BlockStatement', body: [Node] }

深入理解 js-ast-query

js-ast-query 的核心是查询器，它使用了一种类似 CSS 选择器的语法。查询器本质上是一个包含要查询的节点类型及其属性的 JavaScript 对象。

查询语句的形式为 {type: NodeType, [key: value], ...}，其中 NodeType 是要查询的节点类型，key: value 指定了要匹配的节点属性及其值。

支持的属性值

• string: 匹配给定的字符串值
• regExp: 匹配给定的正则表达式
• number: 匹配给定的数值
• boolean: 匹配给定的布尔值

快捷匹配器

js-ast-query 还支持特殊的快捷匹配器，这些匹配器可以用来快速匹配某些常见的节点类型及其属性。

• Identifier(name): 匹配名称为 name 的标识符
• MemberExpression(object, property): 匹配对象属性表达式
• AssignmentExpression(left, right): 匹配赋值表达式
• CallExpression(callee, args): 匹配函数调用表达式

嵌套查询

js-ast-query 支持嵌套查询，可以查询节点的属性值。例如，可以查询函数声明的参数：

const { query } = require('js-ast-query');

const result = query(ast, {
  type: 'FunctionDeclaration',
  id: { name: 'add' },
  params: { type: 'Identifier' },
}).map((node) => node.params.map((param) => param.name))[0];
console.log(result); // ['a', 'b']

上面的代码中，使用嵌套查询器 {type: 'Identifier'} 查询了函数的参数。

总结

js-ast-query 是一个强大的基于 AST 的 JavaScript 代码查询库，它使用查询器语法类似于 CSS 选择器，支持自定义查询器及嵌套查询语法。这个库在工程实践中可以大大提高开发者的效率，推荐学习和使用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64080