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

【问题标题】：Do not import "index.js" on folder import?不要在文件夹导入时导入“index.js”？
【发布时间】：2018-02-11 04:17:09
【问题描述】：

我想知道是否可以在直接导入模块文件夹时重新配置导入行为（查找 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 也可以这样做，但谷歌搜索到目前为止没有显示任何内容。

【问题讨论】：

【解决方案1】：

我采用了以下解决方案：

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

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

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

我创建了一个小脚本，它可以自动为我创建 index.js 文件，所以我没有任何额外的工作。

【讨论】：