编写Bash脚本递归列出React组件的@browse导入文件

需求说明 #

• 传入组件文件路径，递归列出该组件所有导入的、使用@browse别名的源文件
• 输出需去重，排除node_modules等非项目源文件
• 已实现提取@browse导入路径，但后续匹配文件无结果；现有递归代码冗余且运行缓慢，需优化

现有问题分析 #

1. xargs调用rg无输出：原脚本中xargs rg -l未指定匹配规则，且@browse是路径别名，需先映射到项目实际文件路径才能找到对应文件
2. 递归代码效率低下：重复遍历所有文件、嵌套循环匹配字符串、无去重逻辑，导致大量冗余计算和重复处理

优化后的脚本 #

#!/bin/bash

# 配置：@browse别名对应的实际项目根路径（根据你的项目结构调整）
BROWSE_ROOT="./src"
# 记录已处理的文件，避免重复递归
declare -A PROCESSED_FILES

# 递归遍历@browse导入的文件
recurse_imports() {
    local FILE="$1"
    # 跳过已处理的文件或非源文件
    if [[ -n "${PROCESSED_FILES[$FILE]}" || "$FILE" == *node_modules* ]]; then
        return
    fi
    # 标记当前文件为已处理
    PROCESSED_FILES["$FILE"]=1
    echo "$FILE"

    # 提取当前文件中所有@browse导入的路径，转换为实际文件路径
    local IMPORTS=$(rg -o "from '@browse([^']+)'" "$FILE" | sed -E "s/from '@browse([^']+)'/\1/" | while read -r IMP_PATH; do
        # 处理可能的扩展名缺失（React组件可能省略.js/.jsx）
        local FULL_PATH="$BROWSE_ROOT$IMP_PATH"
        if [[ -f "$FULL_PATH.js" ]]; then
            echo "$FULL_PATH.js"
        elif [[ -f "$FULL_PATH.jsx" ]]; then
            echo "$FULL_PATH.jsx"
        elif [[ -f "$FULL_PATH.ts" ]]; then
            echo "$FULL_PATH.ts"
        elif [[ -f "$FULL_PATH.tsx" ]]; then
            echo "$FULL_PATH.tsx"
        elif [[ -d "$FULL_PATH" && -f "$FULL_PATH/index.js" ]]; then
            echo "$FULL_PATH/index.js"
        elif [[ -d "$FULL_PATH" && -f "$FULL_PATH/index.jsx" ]]; then
            echo "$FULL_PATH/index.jsx"
        elif [[ -d "$FULL_PATH" && -f "$FULL_PATH/index.ts" ]]; then
            echo "$FULL_PATH/index.ts"
        elif [[ -d "$FULL_PATH" && -f "$FULL_PATH/index.tsx" ]]; then
            echo "$FULL_PATH/index.tsx"
        fi
    done)

    # 递归处理每个导入的文件
    for IMP_FILE in $IMPORTS; do
        recurse_imports "$IMP_FILE"
    done
}

# 检查传入的文件是否存在
if [[ -z "$1" || ! -f "$1" ]]; then
    echo "错误：请传入有效的组件文件路径"
    exit 1
fi

# 启动递归遍历
recurse_imports "$1" | sort -u

脚本说明 #

1. 别名映射：通过BROWSE_ROOT配置@browse对应的实际项目路径，确保导入路径能正确定位到文件
2. 去重机制：用关联数组PROCESSED_FILES记录已处理的文件，避免重复递归和输出
3. 扩展名处理：自动匹配React组件常见的扩展名（.js/.jsx/.ts/.tsx）及目录下的index文件，覆盖绝大多数导入场景
4. 高效匹配：用rg -o精准提取导入路径，避免不必要的字符串处理；仅遍历需要处理的文件，而非全项目扫描
5. 最终排序去重：输出前用sort -u确保结果唯一且有序

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