При написании компонентов React я принимаю этот стиль каталогов, когда компоненту требуются вспомогательные файлы (модули CSS, изображения и т. Д.):
src/components/Simple.jsx
src/components/Complex/Complex.jsx
src/components/Complex/Complex.module.scss
src/components/Complex/otherExampleSupportFile.js
С основным компонентом в файле с именем, совпадающим с каталогом (потому что, если основной код всегда находится в каталоге index.jsx, все вкладки редактора кода будут все говорить "индекс", и это быстро запутает).
Но тогда для этого требуется небольшой src/components/Complex/index.js файл, содержащий export default from './Complex';, если кто-либо хочет попытаться импортировать Complex из src/components/Complex, точно так же, как он импортирует src/components/Simple. Этот обходной путь позволяет импорту работать, но добавляет дополнительные сборочные модули в сборку.
Как бы я сконфигурировал Babel (или плагин Babel) для преобразования импорта следующим образом:
import Complex from 'src/components/Complex';
в это:
import Complex from 'src/components/Complex/Complex';
когда целевой путь является каталогом (и не содержит никаких index.js / index.jsx файлов)?
Так, например, с учетом этих файлов:
src/components/Complex/Complex.jsx
src/components/Manual/index.jsx
src/components/Simple.jsx
И этот импорт:
import Complex from 'src/components/Complex';
import Manual from 'src/components/Manual';
import Simple from 'src/components/Simple';
Вавилон может перейти к чему-то вроде этого (не включая _interopRequireDefault упаковщиков):
var Complex = require('src/components/Complex/Complex.jsx');
// and these would remain unchanged from Babel's current behaviour…
var Manual = require('src/components/Manual/index.jsx');
var Simple = require('src/components/Simple.jsx');