求推荐：React项目批量替换className为.module.css格式的工具

一、IDE正则批量替换（快速上手） #

主流IDE（VS Code、WebStorm）都支持正则查找替换，适合快速处理大部分场景：

操作步骤 #

1. 打开IDE的全局查找替换功能，开启正则模式。
2. 使用以下规则：
   • 查找：className="([\w-\s]+)"
   • 替换（针对含短横线的类名，用方括号访问）：className={${styles['$1'].replace(/\s+/g, '} ${styles[')}}
     （注：如果类名都是驼峰格式，可简化为className={${styles.$1.replace(/\s+/g, } ${styles.)}}）
3. 先在小范围文件测试替换效果，确认无误后再批量应用到整个项目。

缺点：正则可能误匹配注释、字符串中的className，适合结构规整的代码场景。

二、AST脚本转换（精准可靠） #

用抽象语法树（AST）工具可以精准识别JSX中的className属性，避免误改其他内容。可以基于Babel生态写一个转换脚本：

1. 安装依赖：

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

2. 编写转换脚本（命名为convert-css-modules.js）：

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

// 转换单个文件
function convertFile(filePath) {
  const code = fs.readFileSync(filePath, 'utf8');
  const ast = parser.parse(code, {
    sourceType: 'module',
    plugins: ['jsx', 'typescript'] // 用TS则保留typescript，否则移除
  });

  traverse(ast, {
    JSXAttribute(path) {
      if (path.node.name.name === 'className' && t.isStringLiteral(path.node.value)) {
        // 拆分空格分隔的类名
        const classNames = path.node.value.value.split(/\s+/).filter(Boolean);
        // 生成styles访问表达式
        const styleExprs = classNames.map(name => {
          return name.includes('-') 
            ? t.memberExpression(t.identifier('styles'), t.stringLiteral(name))
            : t.memberExpression(t.identifier('styles'), t.identifier(name));
        });
        // 拼接成模板字符串
        const templateParts = [];
        styleExprs.forEach((expr, idx) => {
          templateParts.push(t.templateElement({ raw: '' }));
          templateParts.push(expr);
          if (idx !== styleExprs.length - 1) {
            templateParts.push(t.templateElement({ raw: ' ' }));
          }
        });
        // 修正模板元素结构
        const templateLiteral = t.templateLiteral(
          templateParts.filter((_, idx) => idx % 2 === 0),
          templateParts.filter((_, idx) => idx % 2 !== 0)
        );
        // 替换原className值
        path.node.value = templateLiteral;
      }
    }
  });

  const output = generate(ast, { concise: true }, code);
  fs.writeFileSync(filePath, output.code);
}

// 遍历目录下所有JS/TSX文件
function traverseDir(dir) {
  const files = fs.readdirSync(dir);
  files.forEach(file => {
    const fullPath = path.join(dir, file);
    const stat = fs.statSync(fullPath);
    if (stat.isDirectory()) traverseDir(fullPath);
    else if (/\.(js|jsx|ts|tsx)$/.test(file)) convertFile(fullPath);
  });
}

// 执行转换，传入项目src目录路径
traverseDir('./src');

3. 运行脚本：

node convert-css-modules.js

三、ESLint自定义规则（适合长期维护） #

如果项目已用ESLint，可自定义规则实现自动修复：

1. 创建规则文件（lib/rules/convert-css-modules.js）：

module.exports = {
  meta: { fixable: 'code', schema: [] },
  create(context) {
    return {
      JSXAttribute(node) {
        if (node.name.name === 'className' && node.value.type === 'Literal') {
          const classNames = node.value.value.split(/\s+/).filter(Boolean);
          if (!classNames.length) return;
          
          // 生成修复代码
          const styleParts = classNames.map(name => 
            name.includes('-') ? `styles['${name}']` : `styles.${name}`
          ).join(' + " " + ');
          
          context.report({
            node,
            message: 'Convert className to CSS Modules format',
            fix(fixer) {
              return fixer.replaceText(node, `className={${styleParts}}`);
            }
          });
        }
      }
    };
  }
};

2. 在ESLint配置中引入规则：

{
  "plugins": ["local-rules"],
  "rules": {
    "local-rules/convert-css-modules": "error"
  }
}

3. 执行自动修复：

eslint src --fix

注意事项 #

• 转换前务必备份代码或提交Git版本，避免出错无法回滚。
• 转换后需确保每个组件都正确导入对应CSS Module（如import styles from './Component.module.css'），可配合ESLint规则检查遗漏导入。
• 动态className（如className={isActive ? 'active' : ''}）需单独处理，可扩展AST脚本或手动调整。

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