[TS] tsconfig.json 변환 할 파일 지정 과 변환 결과 설정 옵션 (files, include, exclude, outDir)

 

타입스크립트는 기본적으로 tsconfig.json 파일의 경로를 기준으로 모든 디렉토리를 탐색하며 모든 .ts 파일을 .js파일로 변환한다.

 

tsconfig.json 설정에서 변환 시킬 타깃 파일을 지정 할 수 있는데, 타깃 파일을 지정하면 그 파일과 그 파일 내에서 import 나 required 로 불러와 사용하는 다른 파일들이 있다면 그 파일들도 함께 딸려와서 변환 된다.

 

tsconfig.json에서 변환 대상을 지정하는 옵션에는 다음과 같은 항목이 사용된다.

 

files

include

exclude

 

1. files : 변환 포함시킬 파일 직접 지정

타입스크립트 CLI 로 아래와 같이 변환 할 파일을 선택 할 수 있는데 $ tsc target.ts 그 타깃이 되는 파일들을 files에 작성해 놓으면 다음부터는 $tsc 명령 만으로도 타깃 파일들을 변환 할 수 있다.

- files로 직접 지정된 타깃은 exclude에 포함되도 변환 대상이 된다.

- grob 패턴 없이 tsconfig.json 파일의 경로를 기준으로 실제 파일의 경로를 지정해 주어야 한다.

 

2. include : 변환 포함시킬 파일 패턴으로 지정

// tsconfig.json
{
  "include": ["src/**/*", "tests/**/*"]
}

grob 패턴을 통해 변환에 포함시킬 파일들을 지정할 수 있다.

include를 지정하면 지정된 파일과 그 파일에서 사용하는 다른 파일 에 대해서만 컴파일이 진행된다.

 

include vs files

files는 grob 패턴을 지원하지 않기 때문에 보통 파일 몇개 만 선택해서 변환하고 싶을 때는 files, 디렉토리 단위로 변환할 파일을 지정하고 싶을때는 include 옵션을 사용한다.

 

3. exclude : include 옵션에 걸리는 파일 들 중, 제외시킬 파일을 grob 패턴으로 지정

// tsconfig.json
{
    "exclude": [
        "node_modules",
        "*/*/searchScroll.ts"
    ]
}

include 옵션에 걸리는 파일 들 중에서 grob 패턴을 통해 변환에 제외 시킬 파일들을 지정할 수 있다.

- files에 직접 선언된 파일은 exclude 패턴에 걸려도 무조건 변환된다.

- 변환 되는 파일 내부에서 import 나 required로 불러와지는 파일은 실제 사용 되는 파일이라고 판단하여 exclude 패턴에 걸리더라도 무조건 변환 대상이 된다.

- node_modules 나 dist 폴더와 같이 변환이 필요없는 파일들의 패턴을 지정하는데 사용된다.

 

정리 - 그러면 어떤 파일이 변환된다는 걸까?

files에 직접 지정된 파일 과 변환 되는 파일에서 import 나 required로 불러와지는 파일은 무조건 변환 된다.

include에 매칭 되는 파일 중 exclude로 제외되지 않은 파일은 변환 된다.

 

 

변환 결과물이 저장 될 경로 지정하기

tsconfig.js 파일의 compilerOptions.outDir 옵션으로 변환되는 파일을 모아 놓을 경로를 설정 할수 있다.

// tsconfig.json
{
  "compilerOptions": {

    "outDir": "./dist", // 변환 완료된 .js 파일들이 저장될 경로 지정
  }

}

경로를 따로 지정하지 않으면 npx tsc 명령으로 타입스크립트 트랜스파일을 수행하면 각각의 .ts 파일의 경로에 변환된 .js 파일이 함께 위치하게 된다. 이렇게 실제 운영되는 파일과 빌드 파일이 같은 경로에 혼합되어있으면 운영하는 코드에만 집중하기가 힘들어진다.

 

compilerOptions.outDir 옵션에 변환 경로를 지정하면 위와 같이 변환된 .js파일이 한곳에 모아 관리 할 수 있다.

 

개발 환경과 배포 환경에서 사용할 tsconfig.json 파일 분리하기

실제 배포 환경에서는 test 관련 파일이나 node_modules 내 파일들까지는 .js로 변환 할 필요가 없다. 

$ tsc -p 변환에사용할config파일

위와같이 변환시에 -p옵션을 주면 변환에 사용할 config 파일을 지정 할 수 있는데

tsconfig.build.json 파일을 따로 만들어 배포환경에서는 그 파일로 빌드를 수행하면 test에서 사용 되는 파일들을 제외 시킬 수 있다.

 

예시 1

// tsconfig.json -> 개발 환경에서 사용 할 config
{
  "compilerOptions": {
    // ...
  },
  "exclude": [
    "coverage",
    "dist",
    "node_modules"
  ]
}

// tsconfig.build.json -> 배포 환경에서 사용 할 config
{
  "conpilerOptions": {
    // ...
  },
  "files": [
    "src/index.ts",
    "typings/index.d.ts"
  ]
}

compilerOptions 의 경우 tsconfig.json 와 tsconfig.build.json 동일한 내용을 작성해야 나중에 개발환경과 배포환경에서 컴파일 옵션 때문에 작동이 달라 지는 문제를 방지 할 수 있다.

 

예시 2 - nestjs

// tsconfig.json -> 개발 환경에서 사용 할 config
{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2015",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false
  }
}

// tsconfig.build.json -> 배포 환경에서 사용 할 config
{
  "extends": "./tsconfig.json",
  "exclude": ["node_modules", "test", "dist", "**/*spec.ts"]
}

nestjs 설치시 생성 되는 tsconfig 파일들을 살펴보면 nestjs 또한 빌드를 위한 tsconfig.build.json파일을 따로 제공해주는 것을 확인 할 수 있다.

 

 

참고 자료:

https://unional.gitbooks.io/typescript/content/pages/06-files-and-projects/tsconfig.html

tsconfig.json · typescript