如何用Node.js读取文件找出JS/TSX中的所有React组件？

正则表达式仅能处理非常简单的组件定义场景，一旦遇到箭头函数组件、默认导出的匿名组件、继承React.PureComponent的类组件、带TypeScript类型注解的组件等情况，就会出现漏判或误判，这也是你之前的正则无法正常工作的原因。

更可靠的方案是通过**抽象语法树（AST）**解析代码，AST会将代码转换成结构化的节点树，能精准识别所有语法结构。下面是基于Babel工具链实现的具体方案：

步骤1：安装依赖 #

npm install @babel/parser @babel/traverse @babel/preset-react @babel/preset-typescript

步骤2：实现组件提取函数 #

const fs = require('fs');
const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;

function extractReactComponents(filePath) {
  const components = [];
  const fileContent = fs.readFileSync(filePath, 'utf8');

  // 解析JSX/TSX代码生成AST
  const ast = parser.parse(fileContent, {
    sourceType: 'module',
    plugins: ['jsx', 'typescript']
  });

  // 遍历AST节点，收集各类React组件
  traverse(ast, {
    // 处理类组件（继承React.Component/PureComponent）
    ClassDeclaration(path) {
      const classNode = path.node;
      if (classNode.superClass?.type === 'MemberExpression') {
        const superClassName = classNode.superClass.property.name;
        if (superClassName === 'Component' || superClassName === 'PureComponent') {
          components.push(classNode.id.name);
        }
      }
    },

    // 处理命名函数组件（function MyComponent() {}）
    FunctionDeclaration(path) {
      const funcNode = path.node;
      if (/^[A-Z]/.test(funcNode.id.name)) {
        components.push(funcNode.id.name);
      }
    },

    // 处理箭头函数组件（const MyComponent = () => <div/>）
    VariableDeclarator(path) {
      const varNode = path.node;
      if (varNode.id.type === 'Identifier' && /^[A-Z]/.test(varNode.id.name)) {
        const initNode = varNode.init;
        if (initNode.type === 'ArrowFunctionExpression' || initNode.type === 'FunctionExpression') {
          components.push(varNode.id.name);
        }
      }
    },

    // 处理默认导出的组件（export default MyComponent 或 export default () => <div/>）
    ExportDefaultDeclaration(path) {
      const exportNode = path.node;
      const declaration = exportNode.declaration;
      
      if (declaration.type === 'Identifier' && /^[A-Z]/.test(declaration.name)) {
        components.push(declaration.name);
      } else if (['ArrowFunctionExpression', 'FunctionExpression', 'ClassDeclaration'].includes(declaration.type)) {
        // 匿名组件，用文件名标识
        const fileName = filePath.split('/').pop();
        components.push(`匿名组件(${fileName})`);
      }
    }
  });

  return [...new Set(components)]; // 去重后返回
}

// 使用示例
const targetFile = './src/MyComponent.tsx';
const result = extractReactComponents(targetFile);
console.log('提取到的React组件:', result);

方案优势 #

1. 覆盖全面：支持类组件、命名函数组件、箭头函数组件、匿名默认导出组件等所有常见定义方式；
2. 语法兼容：完美支持JSX和TypeScript语法，包括类型注解、泛型等复杂场景；
3. 准确性高：基于AST的解析不会像正则那样受代码格式（如换行、空格）影响，识别结果精准。

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