Как настроить Babel (или плагин Babel) для автоматического преобразования импорта каталога в файл внутри каталога? - PullRequest
Новая
       14

Как настроить Babel (или плагин Babel) для автоматического преобразования импорта каталога в файл внутри каталога?

0 голосов
/ 01 мая 2018

При написании компонентов 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');
...