React项目批量替换className为cx包裹的Bash脚本故障求助

嗨，我来帮你排查这个脚本的问题～你的需求是批量把静态className="xxx"替换成className={cx("xxx")}，且跳过已经用cx包裹的情况，但现有脚本只修改了单个文件，主要问题出在这几个地方：

问题分析 #

1. 正则匹配范围太窄：你用的[a-zA-Z0-9_-]+只能匹配没有空格的单个类名，实际项目里className="btn btn-primary"这种带空格的多类名场景完全覆盖不到。
2. 文件遍历的可靠性问题：find | while read -r file在遇到带空格的文件名时容易出错，导致部分文件被跳过。
3. sed块逻辑的局限性：原脚本的sed块嵌套逻辑可能在某些行结构下失效，比如同一行有多个className的情况。

修正后的脚本 #

我给你调整了脚本，既解决了上述问题，又能可靠遍历所有文件：

#!/bin/bash

# 遍历所有jsx/tsx文件，批量处理
find . -type f \( -name "*.jsx" -o -name "*.tsx" \) -exec sed -i.bak -E '/className={cx\(/! s/className="([^"]+)"/className={cx("\1")}/g' {} +

# 可选：自动删除备份文件（确认替换无误后再执行）
# find . -name "*.bak" -delete

echo "Replacement completed."

关键改进点说明 #

• 更通用的正则：用[^"]+匹配双引号内的所有内容，不管有没有空格、特殊字符（只要不是双引号），完美覆盖静态类名的各种场景。
• 可靠的文件处理：find ... -exec {} +会把找到的文件批量传给sed，避免了while read处理带空格文件名的bug，效率也更高。
• 精准的跳过逻辑：/className={cx\(/!表示只对不包含className={cx(的行执行替换，确保已经用cx包裹的className不会被重复处理。
• 备份机制：-i.bak会给每个修改过的文件生成.bak备份，替换完成后如果确认没问题，可以用注释里的命令批量删除备份。

注意事项 #

1. 先测试再批量执行：建议先在项目的某个测试目录或者备份整个项目后再运行脚本，避免意外修改。
2. 动态className不处理：这个脚本只针对静态的className="xxx"，如果是className={btn ${activeClass}}这种动态拼接的类名，不会被替换（符合你的需求逻辑）。
3. 跨系统兼容：如果是在macOS上运行，BSD版本的sed也支持这个脚本；如果是Linux系统，GNU sed同样适用。

备注：内容来源于stack exchange，提问作者bakrall