求jscodeshift转换MUI V5（React+TypeScript）命名导入为默认导入

1. 准备工作 #

• 全局或局部安装jscodeshift：

  # 全局安装
  npm install -g jscodeshift
  # 或局部安装（推荐项目内使用）
  npm install --save-dev jscodeshift
  

• 确认MUI组件路径规则：所有从@mui/material导入的命名组件，对应默认导入路径为@mui/material/[组件名]（例如Button对应@mui/material/Button）

2. 编写转换脚本 #

创建mui-import-transform.js文件，内容如下：

module.exports = function(fileInfo, api) {
  const j = api.jscodeshift;
  const root = j(fileInfo.source);

  // 匹配@mui/material的命名导入语句
  root.find(j.ImportDeclaration, {
    source: { value: '@mui/material' },
    specifiers: {
      length: { $gt: 0 },
      $each: { type: 'ImportSpecifier' }
    }
  }).forEach(importDecl => {
    const { specifiers } = importDecl.node;
    // 生成单个组件的默认导入语句
    const newImports = specifiers.map(spec => {
      const componentName = spec.local.name;
      return j.importDeclaration(
        [j.importDefaultSpecifier(j.identifier(componentName))],
        j.stringLiteral(`@mui/material/${componentName}`)
      );
    });
    // 替换原命名导入为多个默认导入
    j(importDecl).replaceWith(newImports);
  });

  return root.toSource({ quote: 'single' });
};

3. 执行转换 #

运行命令处理项目中的TS/TSX文件：

jscodeshift -t ./mui-import-transform.js src/**/*.tsx src/**/*.ts

• 可根据项目目录结构调整src/**/*.tsx src/**/*.ts为实际需要转换的文件路径

4. 处理特殊场景 #

• 混合导入拆分：脚本会自动拆分混合导入（如import Mui, { Button } from '@mui/material'），保留原默认导入并生成组件的单独默认导入
• 排除非组件导出：如果不需要转换createTheme、ThemeProvider这类非组件命名导出，可在脚本中添加过滤逻辑：
  在生成newImports前插入：

  // 定义不需要转换的导出名列表
  const excludeNames = ['createTheme', 'ThemeProvider'];
  const validSpecifiers = specifiers.filter(spec => !excludeNames.includes(spec.local.name));
  

  之后用validSpecifiers替代specifiers生成新导入语句

5. 验证转换结果 #

转换后可检查目标文件的导入语句是否符合预期：

原代码：
import { Button, TextField } from '@mui/material';

转换后：
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';

内容的提问来源于stack exchange，提问作者Jagadeesh Kumar CK