兄弟，这个问题我简直感同身受——之前项目里一堆组件都用index.jsx，编辑器开十几个标签全是index，找组件找得头都大！要实现你说的导入目录自动指向同名主文件，用babel-plugin-module-resolver这个Babel插件就能完美解决，配置也不复杂。

第一步：安装依赖 #

先把插件装到开发依赖里：

npm install --save-dev babel-plugin-module-resolver
# 用 yarn 的话
yarn add --dev babel-plugin-module-resolver

第二步：配置Babel解析规则 #

在你的Babel配置文件（比如项目根目录的babel.config.js、.babelrc或者babel.config.json）里，添加插件的自定义解析逻辑。核心思路是：当你导入一个目录路径时，自动检查该目录下是否存在与目录同名的文件，存在就优先用这个文件，不存在再 fallback 到默认的index文件。

以babel.config.js为例，配置如下：

const path = require('path');
const fs = require('fs');

module.exports = {
  plugins: [
    [
      'module-resolver',
      {
        // 自定义路径解析函数
        resolvePath: (sourcePath, currentFile, opts) => {
          // 先执行插件默认的解析逻辑，拿到可能的目录路径
          const resolvedDefault = opts.defaultResolve(sourcePath, currentFile, opts);
          
          // 判断解析结果是不是一个目录
          if (fs.existsSync(resolvedDefault) && fs.statSync(resolvedDefault).isDirectory()) {
            // 提取目录的名称（比如 "./components/Complex" 就提取 "Complex"）
            const dirName = path.basename(resolvedDefault);
            // 定义你要优先查找的同名文件后缀，按需添加
            const candidateFiles = [
              `${dirName}.jsx`,
              `${dirName}.js`,
              `${dirName}.module.scss`,
              `${dirName}.module.css`
            ];
            
            // 遍历查找存在的文件
            for (const file of candidateFiles) {
              const targetPath = path.join(resolvedDefault, file);
              if (fs.existsSync(targetPath)) {
                return targetPath;
              }
            }
          }
          
          // 如果没找到同名文件，就用默认的解析结果（比如找index.jsx）
          return resolvedDefault;
        },
        // 配置你项目中常用的文件后缀，让插件能正确识别
        extensions: ['.js', '.jsx', '.json', '.module.scss', '.module.css'],
      },
    ],
  ],
};

额外：TypeScript 编辑器兼容（如果用TS） #

如果你用TypeScript开发，为了让编辑器（比如VS Code）不报错，还需要在tsconfig.json里配置路径映射：

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "*": ["*", "*/*"]
    }
  }
}

这个配置告诉TS：当导入一个路径时，先找本身，再找它的子目录下的同名文件，和Babel的解析逻辑对齐。

效果验证 #

配置完之后，你就可以直接这样导入组件：

import Simple from './components/Simple'; // 对应 ./components/Simple.jsx
import Complex from './components/Complex'; // 自动对应 ./components/Complex/Complex.jsx

编辑器标签页会显示Simple.jsx和Complex.jsx，再也不会一堆index分不清啦！

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