javascript - 前端有没有开源的库实现对一段代码提取出所有的定义的变量和定义的方法？

Question

前端有没有开源的库实现对一段代码提取出所有的定义的变量和定义的方法？

比如我有js代码：

var a = 1
var b = 2 

function add(x, y ) {
  return x+y
}
console.log(add(a, b))

那么可以提取出，
变量：a, b
方法：add

如果是其他语言也通用。

请问是否有这样的前端库呢？

Answer 1

这个你应该首先看编辑器都是用什么技术实现的

Answer 2

看你的情况是想实现 Github 仓库中类似的代码定义和引用提示。

这部分可以查看 Github Docs 关于这部分的说明。在你之前的问题里面回复了我就不重新CV回答内容了。
�� 请问一下GitHub上的代码展示区域，右侧有代码的方法和属性和类(任何语言都可以提取出)的罗列展示,这个是基于什么库做的呢？ - SegmentFault 思否

Answer 3

是的，前端有开源的库可以帮助你实现这样的功能，但是需要注意的是，这样的库通常是基于抽象语法树（AST, Abstract Syntax Tree）进行操作的，因为直接解析源代码并提取变量和方法名是一个相对复杂的任务，而AST为这样的操作提供了结构化的数据。

对于JavaScript，一个常用的库是Esprima或Acorn，它们都可以将JavaScript代码解析为AST。然后，你可以遍历这个AST来找到所有的变量定义和方法定义。

然而，这些库本身并不直接提供“提取所有定义的变量和定义的方法”这样的功能，而是提供了构建这样功能的基础。你需要编写额外的代码来遍历AST并提取所需的信息。

以下是一个使用Acorn和walk（一个遍历AST的库）的简单示例，展示了如何提取变量和方法：

const acorn = require('acorn');
const walk = require('acorn-walk');

const code = `
var a = 1;
var b = 2;

function add(x, y) {
  return x + y;
}
console.log(add(a, b));
`;

const ast = acorn.parse(code, {
  ecmaVersion: 2020, // 使用适合你代码的ECMAScript版本
  sourceType: 'module', // 或 'script' 取决于你的代码
});

// 使用walk遍历AST
walk.simple(ast, {
  VariableDeclarator(node) {
    console.log('变量:', node.id.name); // 提取变量名
  },
  FunctionDeclaration(node) {
    console.log('方法:', node.id.name); // 提取函数名（即方法名）
  },
});

请注意，这个示例只处理了最简单的情况，并且可能无法处理所有可能的JavaScript语法。例如，它不会处理在函数体内声明的变量（使用let或const），也不会处理对象字面量中的方法。为了处理这些情况，你可能需要编写更复杂的遍历逻辑或使用更高级的库（如Estraverse或Recast）。

此外，虽然JavaScript是一个常见的前端语言，但其他语言（如Python、Ruby等）的前端库可能不会那么常见，因为这些语言通常不是用于编写前端代码的。然而，对于服务器端代码或构建工具，这些语言可能有类似的库可以帮助你解析和提取代码中的信息。