Javascript 如何配置react project以基于父文件夹的名称解析条目文件，而不是默认为index.js？

我有一个React项目，我正在使用由创建的

webpack

和

babel

配置

该项目的结构与此类似：

root
├── components/
│   └── Button/
│       ├── constants/
│       ├── helpers/
│       ├── Button.jsx
│       └── index.js
├── otherFolders/
├── App.js
└── package.json

export { default } from './Button.jsx

其中

index.js

看起来总是与此类似：

root
├── components/
│   └── Button/
│       ├── constants/
│       ├── helpers/
│       ├── Button.jsx
│       └── index.js
├── otherFolders/
├── App.js
└── package.json

export { default } from './Button.jsx

我不想用普通的导入语句在应用程序的其他部分导入这些组件：

import Button from 'components/Button'

我想省略index.js文件，并使节点解析与其父文件夹同名的文件

因此，对于上面的示例，它将如下所示：

root
├── components/
│   └── Button/
│       ├── constants/
│       ├── helpers/
│       └── Button.jsx
├── otherFolders/
├── app.js
└── package.json

我相信这可以通过创建

webpack

或

babel

插件来解决

所以我的问题是：

• 是否需要编写

  webpack

  或

  babel

  插件来实现这一点？
  • 如果是，具体是什么负责解析文件，并且需要自定义插件
  • 如果没有，我还有什么其他选择来实现我想要的

---

如果我理解正确，为什么不能从Button.jsx导出

类

或

函数

<代码>导出默认类按钮扩展组件@AaminKhan，我正按照您的建议从

按钮.jsx导出组件。但是我需要使用“组件/按钮/按钮”中的
import按钮导入它
，或者按照问题中所述创建索引文件，并使用“组件/按钮”中的导入按钮

。如果我理解正确，为什么您不能从Button.jsx导出

类

或

函数

<代码>导出默认类按钮扩展组件@AaminKhan，我正按照您的建议从

按钮.jsx导出组件。但是我需要使用“组件/按钮/按钮”中的
import按钮导入它，或按照问题中所述创建索引文件，并使用“组件/按钮”中的导入按钮
。