Блог

Главная - Вопросы по программированию - Проект React автоматически экспортирует компоненты по имени файла

Проект React автоматически экспортирует компоненты по имени файла

#javascript #reactjs #ecmascript-6

#javascript #reactjs #ecmascript-6

Вопрос:

Я работаю над довольно большим проектом, используя react / webpack с большим количеством компонентов. В настоящее время моя структура папок выглядит следующим образом:

 bin/
media/
src/
  components/
    login/
      Login.js
      LoginContainer.js
    registration/
    index.js
    ..
  framework/
  redux/
  ..
static/
test/

И в src/components/index.js я выполняю экспорт: export Login from ./Login/Login так что в других компонентах я могу просто делать import {Login, LoginContainer} from 'components' без необходимости поиска местоположения файла.

Есть ли способ не иметь экспорта в index.js нравится сейчас? Я хотел бы автоматически экспортировать все файлы javascript по их имени, без необходимости вводить его каждый раз.

Ответ №1:

Вы можете добавить (все) свои компоненты-вложенные папки в ваш webpack.config.resolve и просто импортировать имя файла. Или просто добавьте корневой каталог компонентов в resolve.modulesDirectories и импортируйте путь относительно components-folder.

Комментарии:

1. Но тогда мне пришлось бы импортировать их как import Login from 'components/login/Login' нет? Я хотел бы продолжать импортировать, как: import {Login, LoginContainer} from 'components'

2. если вы используете webpack.config.resolve нет. просто import theFilesExport from 'FileName' . в качестве альтернативы вы можете использовать readdir-loader