Я занимаюсь реорганизацией моей структуры импорта и экспорта модулей. Цель здесь - импортировать UserActions через index.js в нескольких файлах (а именно в UserReducer.js и Home.js).импорт и экспорт модулей в ES6
древовидная структура проекта выглядит следующим образом:
js
|_ modules
| |_ user
| | |_index.js
| | |_UserActions.js
| | |_UserReducer.js
| | |_UserSagas.js
|_ containers
| |_ Home.js
Это содержание modules/user/index.js:
import * as UserActions from './UserActions'
import * as UserSagas from './UserSagas'
import UserReducer from './UserReducer'
export { UserActions, UserReducer, UserSagas }
Первоначально действия были импортированы непосредственно из файла UserActions, в обоих UserReducer.js и Home.js следующим образом:
- в UserReducer.js:
import * as UserActions from './UserActions' - в Home.js:
import * as UserActions from 'modules/user/UserActions'
И все было правильно работать. Теперь я хочу, чтобы эти два импорта использовали файл index.js выше.
шаг 1)
внутри UserReducer, я изменить линию от импорта:
import * as UserActions from './UserActions'
к:
import { UserActions } from '.' // fetches the named export from index.js
Это работает.
шаг 2)
внутри Home.js, я изменить импортную линию от:
import * as UserActions from 'modules/user/UserActions'
к:
import { UserAction } from 'modules/user'
Сейчас WebPack не жалуется, но браузер выдает ошибку в UserReducer, что UserActions не определено.
Наконец:
с использованием import { UserActions } from 'path_to_index.js' обозначения произведений, до тех пор, как я использую его только в одном месте (может быть в любом файле).
Как только я использую его в обоих местах, весь ад сыпучих ...
Любые идеи? Спасибо
Редактировать: Я понимаю, что ошибки выше возникают только в том случае, если пользователь/index.js импортирует и экспортирует UserSagas. Если я импортирую UserSagas непосредственно из своего файла вместо добавления его в index.js, приложение будет работать правильно.
Итак, в UserReducer.js вы импортируете index.js, который импортирует UserReducer.js? Звучит как круговая зависимость. Наверное, это последствия. Во всяком случае, вы всегда можете попытаться импортировать '*' в том месте, где у вас есть неопределенная ошибка для именованных импортов и зарегистрировать то, что было импортировано. – estus
С фигурными фигурными скобками, я считаю, что он импортирует только указанный модуль (в данном случае действия). Если это так, это не вызовет кругового отпечатка. Да, import * печатает типы действий и определения функций, как следует. Однако импорт, который я хочу, регистрирует undefined – Khorkhe
Опять же, в UserReducer.js вы импортируете файл, который импортирует UserReducer.js. Это круговая зависимость, а компакт-диск плохой. Даже если это будет работать в реальных модулях ES6 (не уверен в этом), нет реальных модулей ES6 (спецификация модуля ES еще не завершена). Модули транслируются, и вы полагаетесь на то, как Babel относится к CD. Если вы обнаружите, что проблема не с CD, пожалуйста, устраните ее из уравнения и задайте вопрос в соответствии с этим. – estus