Дайте вашим компонентам отдельную папку. Они заслужили это.

Есть несколько веских причин, по которым каждый компонент, который вы пишете, должен иметь следующую структуру:

src/ 
  component/
    category/
      ComponentName/
        index.js
        ComponentName.js

С файлом index.js, содержащим следующее:

export {default} from './ComponentName.js';

Хотя создание дополнительного файла для каждого компонента немного раздражает, компромисс того стоит. Вы получаете согласованность, бесплатное сглаживание, удобство нечеткого поиска, а дополнительный файл будет оптимизирован компилятором при сборке для производства.

1. Последовательность

Если у вас есть компоненты, которым требуются дополнительные ресурсы, такие как изображения, у вас нет некоторых компонентов в папках, а некоторых нет:

src/
  component/
    category/
      ComponentA.js
      ComponentB/index.js
      ComponentB/ComponentB.js
      ComponentB/image.jpg

Поскольку многие инструменты сначала сортируют по папкам, а затем в алфавитном порядке, это также обеспечивает правильную сортировку вашего списка компонентов.

2. Бесплатное сглаживание

Поскольку у вас есть index.js файл, который просто экспортирует компонент, вы можете перенаправить или переписать этот компонент в другом месте, если вам нужно. Например, при проведении A / B-тестирования ваш индексный файл может выглядеть следующим образом:

import ComponentB from './ComponentB';
import NewComponentB from '...';
import Experiment from '/component/util/Experiment';
export default (props) => (
  <Experiment>
    {({useNewB}) => useNewB ? 
      <NewComponentB {...props} /> : <ComponentB {...props} />
    )}
  </Experiment>
);

Вы также можете использовать index.js для разделения фрагментов:

import Loadable from 'react-loadable';
import Loading from '...';

export default Loadable({
  loader: () => import('./ComponentB'),
  loading: Loading,
});

Этот шаблон, как правило, защищает исходный компонент от каких-либо «служебных» побочных эффектов, которые в противном случае не изменяют основное поведение компонента.

3. Удобство нечеткого поиска

Поскольку ваш основной компонент находится в файле с именем Component/Component.js, использование нечеткого средства поиска для Component даст правильный результат вместо попытки найти правильный index.js файл.

4. Дополнительный реэкспорт не имеет значения.

Если для вашей предустановки babel установлено значение modules: false и используется webpack@4, дублирующийся экспорт будет свернут в производственном режиме благодаря optimization.concatenateModules. Подробнее об этом можно прочитать здесь:



webpack 4: режим и оптимизация
webpack добавляет параметр режима. Что это значит? medium.com



Примерно в режиме разработки для компонента с именем ComponentName вы увидите что-то вроде:

/***/ "./src/component/example/ComponentName/ComponentName.js":
/*!********************************!*\
  !*** ./src/component/example/ComponentName/ComponentName.js ***!
  \********************************/
/*! exports provided: default */
// ...
/***/ "./src/component/example/ComponentName/index.js":
/*!******************************!*\
  !*** ./src/component/example/ComponentName/index.js ***!
  \******************************/
/*! exports provided: default */

А в производстве все это исчезнет, ​​и вы останетесь с одним объявлением переменной, указывающей на ваш компонент, без каких-либо операций экспорта, импорта или оберток модулей.

5. Легкость импорта

Помните этот дружелюбный index.js файл? Это означает, что потребителям вашего компонента не нужно писать больше, чем необходимо при импорте.

import ComponentName from '/component/category/ComponentName';

Им не нужно добавлять дополнительный ComponentName/ComponentName, поскольку файл index.js автоматически используется для папок. Если вы используете веб-пакет, вы, вероятно, могли бы написать собственный преобразователь веб-пакетов, чтобы он выполнял поиск ComponentName.js вместо index.js в папках, но это нарушает работу многих существующих инструментов, таких как flow, которые полагаются на ранее существовавшее поведение index.js.

Убежденный?

Нет причин не делать этого ‡. Не будьте злобно ленивыми. Дайте компонентам место, где они будут счастливы. Дайте им отдельную папку и удобный index.js файл для компании. Используйте компоненты папки в своем следующем проекте. 🙏

‡ Могут быть причины не делать этого.