不要在文件夾導入時導入“ 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，它應該嘗試導入與文件夾相同名稱的文件作為索引文件。

您可以在每個Web服務器上重新配置目錄索引，因此我希望使用webpack / babel可以實現相同的目的，但是到目前為止，谷歌搜索沒有顯示任何內容。

Answer 1

我采用以下解決方案：

在我的每個文件夾中，我將在“ real”模塊旁邊創建一個index.js ，其中包含以下內容：

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

這樣，我就可以將代碼保存在Button.js而無需在其他地方導入Button/Button 。

我創建了一個小腳本，該腳本可以自動為我創建index.js文件，因此沒有任何其他工作。