如何用Node.js提取jQuery插件的settings与methods以生成插件文档？

我之前也遇到过类似的批量处理jQuery插件文档的需求，直接用正则硬啃JS代码真的很容易踩坑——毕竟JS语法太灵活了，换行、注释、嵌套结构分分钟让正则失效。最靠谱的方案是用AST（抽象语法树）解析，通过分析代码的语法结构来精准提取你需要的settings和methods对象。下面是我实践过的完整解决方案：

一、依赖准备 #

我们需要用到Babel生态的几个工具来解析和遍历AST：

• @babel/parser：把JS代码转换成AST
• @babel/traverse：遍历AST节点
• @babel/types：判断节点类型
• @babel/generator：把AST节点转回JS代码字符串

安装命令：

npm install @babel/parser @babel/traverse @babel/types @babel/generator

二、编写解析逻辑 #

下面是一个完整的Node.js脚本，它能读取你的jQuery插件文件，提取闭包内的settings和methods，并输出结构化的数据供文档生成使用：

const fs = require('fs');
const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const t = require('@babel/types');
const generate = require('@babel/generator').default;

/**
 * 提取插件文件中的settings和methods数据
 * @param {string} filePath 插件文件路径
 * @returns {Object} 包含settings和methods的代码字符串及结构化数据
 */
function extractPluginData(filePath) {
  // 读取插件文件内容
  const code = fs.readFileSync(filePath, 'utf8');
  
  // 将代码解析为AST，启用ES6+语法支持
  const ast = parser.parse(code, {
    sourceType: 'script',
    plugins: ['es2020']
  });
  
  let settingsAst = null;
  let methodsAst = null;

  // 遍历AST，寻找目标节点
  traverse(ast, {
    // 定位$(function(){...})的调用表达式
    CallExpression(path) {
      if (t.isIdentifier(path.node.callee, { name: '$' }) && path.node.arguments.length > 0) {
        const innerFunc = path.node.arguments[0];
        // 确认参数是函数表达式或箭头函数
        if (t.isFunctionExpression(innerFunc) || t.isArrowFunctionExpression(innerFunc)) {
          // 遍历函数内部的所有语句
          innerFunc.body.body.forEach(statement => {
            // 提取settings的赋值语句：settings = {...}
            if (t.isExpressionStatement(statement)) {
              const expr = statement.expression;
              if (t.isAssignmentExpression(expr) && t.isIdentifier(expr.left, { name: 'settings' })) {
                settingsAst = expr.right;
              }
            }

            // 提取methods的初始定义：const methods = {}
            if (t.isVariableDeclaration(statement)) {
              statement.declarations.forEach(declaration => {
                if (t.isIdentifier(declaration.id, { name: 'methods' }) && t.isObjectExpression(declaration.init)) {
                  methodsAst = declaration.init;
                }
              });
            }

            // 提取methods的属性赋值：methods.b = function(){}
            if (t.isExpressionStatement(statement)) {
              const expr = statement.expression;
              if (t.isAssignmentExpression(expr) && t.isMemberExpression(expr.left)) {
                const member = expr.left;
                if (t.isIdentifier(member.object, { name: 'methods' })) {
                  // 如果methods还未初始化，先创建空对象AST
                  if (!methodsAst) {
                    methodsAst = t.objectExpression([]);
                  }
                  // 把属性添加到methods的AST节点中
                  const prop = t.objectProperty(member.property, expr.right);
                  methodsAst.properties.push(prop);
                }
              }
            }
          });
        }
      }
    }
  });

  // 将AST转换为可读的代码字符串
  const settingsCode = settingsAst ? generate(settingsAst).code : null;
  const methodsCode = methodsAst ? generate(methodsAst).code : null;

  // 进一步解析为结构化的键值对数据（方便后续生成文档）
  const settingsData = settingsAst ? parseObjectToData(settingsAst) : null;
  const methodsData = methodsAst ? parseObjectToData(methodsAst) : null;

  return {
    settingsCode,
    methodsCode,
    settingsData,
    methodsData
  };
}

/**
 * 辅助函数：把ObjectExpression AST转换为键值对对象
 * @param {Object} objAst ObjectExpression类型的AST节点
 * @returns {Object} 结构化的键值对数据
 */
function parseObjectToData(objAst) {
  const result = {};
  objAst.properties.forEach(prop => {
    if (t.isObjectProperty(prop)) {
      // 处理属性名（支持标识符或字符串键）
      const key = t.isIdentifier(prop.key) ? prop.key.name : generate(prop.key).code;
      // 获取属性值的代码字符串
      const value = generate(prop.value).code;
      result[key] = value;
    }
  });
  return result;
}

// ---------------------- 使用示例 ----------------------
const pluginInfo = extractPluginData('./your-jquery-plugin.js');
console.log('提取到的settings配置：');
console.log(pluginInfo.settingsData);
console.log('\n提取到的methods方法：');
console.log(pluginInfo.methodsData);

三、工作原理说明 #

1. AST解析：先把插件代码转换成抽象语法树，这样我们就能基于语法结构而不是字符串匹配来提取内容，彻底避免正则的局限性。
2. 定位闭包：遍历AST找到$(function(){...})的调用节点，进入内部的函数体。
3. 提取目标对象：
   • 找到settings = {...}的赋值语句，提取右边的对象字面量。
   • 找到const methods = {}的变量声明，同时捕获所有methods.xxx = function(){}的属性赋值，把这些属性合并到同一个对象AST中。
4. 转换输出：把AST节点转回代码字符串，或者解析成结构化的键值对，方便后续生成Markdown文档、API文档页面等。

四、适配调整提示 #

如果你的插件有一些变体写法（比如用var声明settings、methods用箭头函数定义等），只需要调整traverse中的节点判断逻辑即可。比如要支持var settings = {...}，可以在VariableDeclaration的判断里添加对var类型的检查：

if (statement.kind === 'var' && t.isIdentifier(declaration.id, { name: 'settings' }) && t.isObjectExpression(declaration.init)) {
  settingsAst = declaration.init;
}

内容的提问来源于stack exchange，提问作者user1663023