2017-11-16 1 views
1

업데이트 : 해결! 순환 종속성 문제를 지적하기 위해 @JulesRandolph에 감사드립니다.TypeScript 및 Webpack의 별칭 문제 3

나는 지금 개발중인 프로젝트에서 매우 바보 같은 상황에 처해있다. 이 프로젝트는 최신 버전의 TypeScript, webpack 및 awesome-typescript-loader를 기반으로합니다.

이 같은 쇼 (나는 또한/*로 (즉, 사용을 위해 $ 및 적응 tsconfig없이 시도주의하시기 바랍니다)) config (설정)

"paths": { 
    "~actions" : [ 
    "app/actions/index.ts" 
    ], 
    "~components" : [ 
    "app/components/index.ts" 
    ], 
    "~helpers" : [ 
    "app/helpers/index.ts" 
    ], 
    "~middlewares" : [ 
    "app/middlewares/index.ts" 
    ], 
    "~redux" : [ 
    "app/redux/index.ts" 
    ], 
    "~styles/*" : [ 
    "app/styles/*" 
    ], 
    "~types" : [ 
    "app/types/index.ts" 
    ] 

웹팩 별칭 :

tsconfig는 다음과 같은 별칭을 포함

:
{ 
    '~actions$': '/Users/user/Workspace/prj-name/app/actions/index.ts', 
    '~components$': '/Users/user/Workspace/prj-name/app/components/index.ts', 
    '~helpers$': '/Users/user/Workspace/prj-name/app/helpers/index.ts', 
    '~middlewares$': '/Users/user/Workspace/prj-name/app/middlewares/index.ts', 
    '~redux$': '/Users/user/Workspace/prj-name/app/redux/index.ts', 
    '~styles': '/Users/user/Workspace/prj-name/app/styles', 
    '~types$': '/Users/user/Workspace/prj-name/app/types/index.ts' 
} 

내 문제는 구체적 만 '앱/REDUX/app.ts "파일에 대해, 나는 다음과 같은 구문을 사용하여 가져올 수 있다는 것입니다

import { 
    imp1, 
    imp2 
} from '~redux'; 

수입이 정의되지 않은 것으로 나타납니다. 그래도이 작업을 수행 할 수 있습니다.

import { 
    imp1 
} from './[comp-name]'; 

동일한 구문 (및 동일한 폴더 이름)을 사용하여 다른 폴더에서 호출 할 수 있습니다. 또한, 다른 폴더에서 ~ redux에서 가져 오기를 호출 할 수 있습니다.

나는 내가 아는 거의 모든 것을 시도했지만 아무 것도 바뀌지 않았습니다. https://pastebin.com/gBabDjH9

+0

'~ reducers'에 대한 별칭이나 경로가 없습니다 ... 이유는 다음과 같습니다. –

+0

미안하지만, reducers 폴더의 이름은 redux입니다. 지적 해 주셔서 감사합니다. 이제 게시물을 수정하십시오. – bmatei

+0

OK webpack 별칭에 대해'$'기호를 알지 못합니다. 그걸 없애려고 했니? –

답변

0

수출이 잘 대신 웹팩 설정에 직교하고 있습니다 런타임에 undefined으로 해결 될 사실은 원형 의존성으로 인해 발생할 수 : 누군가가 관심이 있다면

, 여기에 (거의) 전체 웹팩 설정입니다 .

이 문제를 조사하려면, 당신 같은 버그가 ./index에서 가져 오기 발생 할 수

  1. 확인. 그렇다면 원형 의존성 버그 일 가능성이 큽니다.
  2. 프로젝트를 실행하여이 원형 찾기를 식별하십시오. madge <myTranspiledFolder> --circular과 같은 것입니다. madge가 실행되는 파일이 모듈화되어 있고 (madge가 AMD, CommonJS 및 ES6 모듈을 지원함) 아직 번들되지 않았는지 확인하십시오.
+1

다시 한번 감사드립니다, 줄즈! – bmatei

+0

다시 한 번 환영합니다 :-) –

+0

내 대답 +1 ;-) –