Как избежать экспорт default?

Question

[Windyay]

Добрый день, подскажите пожалуйста
В проекте реакта делал в конце компонента экспорт дефаулт
затем в папке компонента создавал файл index.js
export { default } from './HeroPageList';
что позволяла избежать дублирования при импорте

import HeroPageList from '../../components/HeroPageList'

а не

import HeroPageList from '../../components/HeroPageList/HeroPageList'

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

Comments

[WbICHA]

многие разработчики не любят экспорт дефаулт

Хз в чём их проблема, если правильно его использовать, то он работает как надо.

[WbICHA]

как не дублировать название при импорте и при этом экспортировать именовано

А какая разница? Неужели ты вручную пути прописываешь?

[Никита Красильников]

При большом количестве компонентов, бывает сложно запоминать названия компонентов, особенно если пользуешь автоимпортом. В typescript, можно выносить типы и константы конкретного компонента в отдельные файлы, но на уровне папки и использовать там. Если они тоже где-то понадобились, например интерфейс или константа, так же делать ре-экспорт в индекс файл. Такой подход существует при модульной архитектуре проекта, т.е компонент, типы, константы, редьюсеры (слайсы в случает RTK), юзаются только в одном модуле, а потом идет ре-экспорт в индекс, но это довольно сложная задача

[WbICHA]

Никита Красильников,

сложно запоминать названия компонентов

А зачем их запоминать? Копипастишь название и автоимпортом добавляешь импорт. Всё.

[Никита Красильников]

Тут нет жёстких правил, но многие предпочитают именованный импорт из папки

Answer 1

[Никита Красильников]

Для избежания экспорта по дефолту нужно делать ре-экспорт из файла index.js, например

export { default as HeroPageList } from './HeroPageList'

И тогда будет нормальная вложенность и не будет повторений имён