ES6에서 모듈 가져 오기 및 내보내기

Question

모듈 가져 오기 및 내보내기 구조를 리팩터링하는 중입니다. 목표는 여러 파일 (즉 UserReducer.js 및 Home.js)에서 index.js를 통해 UserActions를 가져 오는 것입니다.

js 
|_ modules 
| |_ user 
| | |_index.js 
| | |_UserActions.js 
| | |_UserReducer.js 
| | |_UserSagas.js 
|_ containers 
| |_ Home.js 

이 modules/user/index.js의 내용입니다 : 같은

프로젝트의 트리 구조가 보이는 행동이 UserActions 파일에서 직접 수입되고 있었다 처음

import * as UserActions from './UserActions' 
import * as UserSagas from './UserSagas' 
import UserReducer from './UserReducer' 

export { UserActions, UserReducer, UserSagas } 

모두 UserReducer.js에서, 그리고 다음과 같이 Home.js :

• : UserReducer.js :Home.js에
• : import * as UserActions from 'modules/user/UserActions'

그리고 모든 것이 제대로 작동했다. 이제 위의 두 가지 가져 오기에서 위의 index.js 파일을 사용합니다.

import * as UserActions from './UserActions' 

행 :

단계 1) 내부 UserReducer

, 난으로부터 반입 라인 변경이 작동

import { UserActions } from '.' // fetches the named export from index.js 

. 웹팩하지만 브라우저를 불평하지 않고 지금

import { UserAction } from 'modules/user' 

:

import * as UserActions from 'modules/user/UserActions' 

에 :

2 단계) Home.js 내부

, 난에서 가져 오기 줄을 변경 UserReducer에 오류가 발생하면 UserActions가 정의되지 않습니다. 마지막으로

:

import { UserActions } from 'path_to_index.js' 표기법 작품을 사용하여, 한 내가 한 장소에서 사용으로 전용 (중 파일에있을 수 있습니다).

마자, 모든 지옥 나누기 느슨한 두 곳 모두에서 사용으로 ...

어떤 아이디어가? 감사합니다

편집 : 나는 user/index.js가 UserSagas를 가져오고 내보내는 경우에만 위의 오류가 발생한다는 것을 알고 있습니다. UserSagas를 index.js에 추가하는 대신 파일에서 직접 가져 오면 응용 프로그램이 제대로 실행됩니다.

Answer 1

@endus는 index.js에서 내 보낸 다른 부분을 가져 오더라도 순환 종속성이 발생한다는 점에서 중요합니다.

색인을 원했습니다.js는 사용자에게 고유 한 인터페이스로 사용되지만, "사용자"이외의 구성 요소에만 적용됩니다. 내부적으로 가져 오기는 작업 파일에서 직접 수행됩니다.