javascript - 导入文件夹时不导入 "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 也能做到这一点，但到目前为止谷歌搜索没有显示任何内容。

Answer 1

我采用了以下解决方案:

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

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

这样我就可以将代码保留在 Button.js 中，但不需要在其他地方导入 Button/Button。

我创建了一个小脚本，可以自动为我创建 index.js 文件，因此我不需要任何额外的工作。