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)에서 정의한 모듈 해석 규칙을 따른다.
'Frontend' 카테고리의 다른 글
lint와 formatter는 엄연히 다르다. (0) | 2024.07.15 |
---|---|
url 상태관리 (0) | 2024.07.15 |
Button 태그에 type을 명시하면 좋은 점 (0) | 2023.07.25 |
브라우저 렌더링 엔진 동작과정 + 웹페이지 속도 최적화 (0) | 2023.03.13 |
🎵바닐라 JS로 크롬 앱 만들기🎵 (0) | 2022.03.21 |