不要在文件夹导入时导入“index.js”？

Question

我想知道是否可以直接导入模块文件夹重新配置导入行为（寻找index.js）。默认情况下，当您假设此模块文件夹结构时：

/components
    /Button
        /index.js
        /style.scss
    /Checkbox
        /index.js
        /style.scss

我可以轻松导入这样的组件：

import Button from 'components/Button';
import Checkbox from 'components/Checkbox';

但是当我处理这些组件时，我的编辑器/ ide中会打开多个index.js文件，这会很快导致混淆。同样适用于样式文件。

我现在所做的是将我的文件夹结构更改为：

/components
    /Button
        /Button.js
        /Button.scss
    /Checkbox
        /Checkbox.js
        /Checkbox.scss

解决了这个问题，我可以直接看到每个打开的文件所属的位置。

但是，现在我的组件导入看起来有点......详细：

import Button from 'components/Button/Button';
import Checkbox from 'components/Checkbox/Checkbox';

因为很明显，当我直接导入文件夹时，webpack / babel会寻找“index.js”。现在我的问题是：我能以某种方式改变这种行为吗？我想告诉webpack / babel它应该尝试导入一个名称与文件夹相同的文件作为索引文件。

你可以在每个网络服务器上重新配置目录索引，所以我希望webpack / babel可以实现同样的目的，但googling到目前为止还没有显示任何内容。

Answer 1

我采用了以下解决方案：

在我的每个文件夹中，我将在“ real”模块旁边创建一个index.js，其中包含以下内容：

import module from './Button.js';
export default module;

通过这种方式，我可以将代码保存在Button.js中，而无需在其他地方导入Button/Button。

我创建了一个小脚本，该脚本可以自动为我创建index.js文件，因此我没有任何其他工作。