реагировать компоненты как разрушенный экспорт

Question

Я создаю свое приложение, используя create-Reaction-app. У меня есть структура папок, например, src / images / icons, и в папке значков есть индекс. js:

import Logo from "./my-logo.svg";

export {
  Logo
}

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

import { Logo } from '../images/icon'

в противном случае я должен был бы сделать

import Logo from '../images/icons/my-logo.sv'

Обычно на странице не будет 1 или 2 значков, это может быть больше, я не хочу иметь супер длинный импорт. Но это на самом деле не решает проблему.

Проблема в том, что индекс. js в src / images / icon продолжает расти. Каждый раз, когда я добавляю новый значок в свою папку значков, мне приходится изменять индекс. js. Есть ли лучшее решение для этого?

Answer 1

Вы можете напрямую реэкспортировать экспорт по умолчанию, используя именованный формат экспорта, поскольку имя экспорта по умолчанию буквально default:

export {default as Logo} from "./my-logo.svg";

, которое заменяет четыре строки (игнорируя пустую), которые вы в данный момент используете иметь в index.js и избегает необходимости перечислять Logo дважды (что представляет опасность для обслуживания).

---

Примечание : Это верно для истинных JavaScript модулей, поэтому я ожидаю, что он будет работать даже с пакетом, таким как Webpack или Rollup (который, я полагаю, вы используете, так как вы импортируете SVG, который не является функциональностью JavaScript, но это такая вещь, как упаковщики часто добавляю).