Frontend

moduleResolution이란

*히아* 2024. 6. 8. 14:23

tsconfig.json을 보면 moduleResolution의 속성이 있는 것을 확인해볼 수 있다. 

 

moduleResolution은 TypeScript 컴파일러 옵션 중 하나로, TypeScript가 모듈을 찾고 해석하는 방식을 지정한다. 

 

moduleResolution의 옵션

 

1. node

node.js의 모듈 해석 전략을 따른다. 대부분의 현대 TypeScript 프로젝트에서 사용되는 기본 모드이다. 

 

  • 절대 경로: node_modules 디렉터리에서 모듈을 찾는다.
  • 상대 경로: 현재 디렉터리에서부터 상위 디렉터리로 거슬러 올라가며 모듈을 찾는다.
  • 파일 확장자: .ts, .tsx, .d.ts, .js 등의 파일 확장자를 순서대로 시도하여 모듈을 찾는다.
  • 패키지 파일: 패키지의 package.json 파일에서 main 필드를 확인하여 모듈을 찾는다.

 

 

2. classic

TypeScript 1.6 이전의 기본 모듈 해석 전략을 따른다. 일반적으로 오래된 프로젝트와의 호환성을 위해 존재한다. 

 

 

  • 상대 경로: 명시된 상대 경로를 기반으로 모듈을 찾습니다.
  • 파일 확장자: .ts, .tsx, .d.ts 파일 확장자를 순서대로 시도하여 모듈을 찾습니다.
  • 절대 경로node_modules 사용하지 않음: node_modules 디렉터리를 사용하지 않으며, 패키지 파일도 참조하지 않습니다.

 

 

3. bundler

TypeScript 4.7 이후로 도입된 새로운 모드로, 현대적인 번들러 (예: Webpack, Rollup, Vite)와의 호환성을 위해 설계

이 모드는 번들러가 사용하는 모듈 해석 전략을 따르며, 보통 번들러의 설정 파일 (예: webpack.config.js, vite.config.ts)에서 정의한 모듈 해석 규칙을 따른다.