是否存在类似jQuery的React AST便捷操作工具？

有不少工具能满足你对React AST做类jQuery式便捷操作的需求，针对你提到的重排、插入、条件渲染包裹这些场景，推荐几个实用的：

• Babel生态（babel-traverse + @babel/types）
  这是处理React AST最主流的方案，Babel本身原生支持JSX解析。babel-traverse提供灵活的遍历机制（包括递归遍历、按需查找节点），@babel/types则封装了所有AST节点的创建、修改、校验方法，完全能覆盖重复重排、插入、条件渲染包裹等场景。
  举个给指定组件加上{flag && }条件渲染包裹的例子：

  const traverse = require('babel-traverse').default;
  const t = require('@babel/types');
  
  traverse(ast, {
    JSXElement(path) {
      // 匹配目标组件，比如<MyComponent />
      if (path.node.openingElement.name.name === 'MyComponent') {
        // 创建{flag && ...}的表达式节点
        const condition = t.identifier('flag');
        const conditionalExpr = t.logicalExpression('&&', condition, path.node);
        // 替换原节点为条件表达式包裹的节点
        path.replaceWith(t.jsxExpressionContainer(conditionalExpr));
      }
    }
  });
  

  优势是生态完善、文档丰富，几乎能处理所有复杂的AST操作场景。

• recast
  如果你需要修改AST后保留原代码的格式（比如缩进、注释），recast是绝佳选择。它的API设计偏向便捷操作，支持类jQuery式的节点查找，同时内置了节点创建和修改方法。
  比如查找并清理所有JSX文本节点的空格：

  const recast = require('recast');
  const { types: t } = recast;
  
  const nodes = recast.find(ast, {
    type: 'JSXText'
  });
  // 遍历修改找到的节点
  nodes.forEach(node => {
    node.value = node.value.trim();
  });
  

  适合需要保持代码风格一致性的批量修改场景。

• ast-query
  这个工具就是专门对标jQuery的AST操作工具，提供了find、filter、replace等链式调用方法，语法非常直观，适合快速定位和修改特定节点。
  比如给指定组件添加新属性：

  const astQuery = require('ast-query');
  const t = require('@babel/types');
  const query = astQuery(ast);
  
  query.find('JSXElement[openingElement.name.name=MyComponent]')
    .attr('openingElement.attributes', attrs => {
      // 添加新属性
      attrs.push(t.jsxAttribute(t.jsxIdentifier('newProp'), t.stringLiteral('value')));
      return attrs;
    });
  

  上手成本低，适合快速完成简单到中等复杂度的AST操作。

这些工具都比acorn更适合处理React AST的复杂操作，尤其是涉及节点重排、插入和条件渲染包裹的场景。你可以根据自己的需求选择：追求生态选Babel，追求格式保留选recast，追求类jQuery语法选ast-query。

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