[TS] compileOptions (outDir,rootDir)

typeScrupt의 compileOptions 중에서 자주 쓰이는 outDir과 rootDir에 대해서 알아봅시다 !!

 

 

outDir이란,

컴파일 후 생성되는 js파일들을 모아두는 폴더명을 지정할 수 있습니다. 

 

TS는 파일을 컴파일 해주는 작업이 꼭 필요한데, outdir을 설정해두면 outdir로 지정된 특정 폴더의 계층구조를 기준으로 컴파일된 파일이 생성됩니다.

 

프로젝트를 하나보면 컴파일 된 파일들을 하나로 모아두는 경우가 많은데, outdir을 정해두면 간편하게 ts 파일을 컴파일 할 수 있습니다.

 

rootDir이란, 

가장 상위계층에는 있는 root 폴더를 지정할 수 있습니다.

 

보통 소스폴더를 특정 dir로 지정할 수 있는데, 그 폴더을 rootdir로 지정해주면 그 폴더를 기준으로 계층구조가 형성됩니다.  만약 사용하지 않게 되면, 가장 상위의 영역을 root로 잡고 컴파일 해줍니다. 

 

예제로 더 알아봅시다. 

 

src 폴더를 생성한 뒤 그 안에 test.ts라는 파일을 생성하고, tsconfig.json 파일에서 outDir과 rootDir을 src, dist로 지정해줍니다.

 

 

 

 

npx tsc 명령어로 컴파일 해보면, 

npx tsc

 

다음과 같이, dist 파일에 컴파일 된 test.js 파일이 생성된 것을 볼 수 있습니다. 

 

 

만약 rootDir을 주석처리 하고 컴파일 하더라도, 위 사진과 같은 결과를 보여주는데, 그 이유는 컴파일 할 파일이 생성된 폴더가 src 이기 때문에, src가 최상단 root가 됩니다. 그렇기에 dist 폴더에 컴파일된 test.js에 파일이 생성됩니다.

 

 

여기서 root 경로에 hi.ts 파일을 만들어 보겠습니다. 

 

 

이 상황에서 컴파일 하게 되면 최상위 경로가 root이기 때문에  dist 폴더 안에 src 폴더가 만들어지고, 그 안에 test.js 파일이 생성됩니다.

 

 

이처럼 rootDir을 어떤 폴더로 설정하느냐에 따라서 계층구조를 형성하는 기준이 달라지게 됩니다 !!