[Typescript] 빌드 환경 설정

타입스크립트는 어쨌건 저쨌건 ts 파일들을 tsc로 트랜스파일해서 js로 만드는 과정을 거쳐야 한다.
실제 런타임은 대부분 js이기 때문에..
근래에 나온 deno를 제외하고 말이다. deno는 아직 멀었다.

여튼, 트랜스파일할 소스파일이 1개뿐이라면 그냥 tsc로 직접 지정을 해도 된다.

하지만 대부분의 상황에서는 소스파일이 2개 이상이며, 계속해서 확장될 경우가 많다.
근데 그걸 하나하나 명령행 인자로 넣어줘야 할까?

다행히도 tsc는 자동으로 빌드 대상 범위를 지정할 수 있는 기능을 제공한다.
tsconfig라는 json 설정 파일을 통해서 말이다.
프로젝트의 루트 경로에 tsconfig 설정파일을 생성한다.

그리고 이런식으로 써넣으면 된다.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES5",
    "sourceMap": true,
    "experimentalDecorators": true,
    "outDir": "build"
  },
  "moduleResolution": "node",
  "exclude": [
    "node_modules",
    "view"
  ]
}

여기서 컴파일러 옵션이 말 그대로 컴파일을 수행하는 데 대한 설정이다.
module은 모듈을 어떻게 처리할까 하는 것인데.. 보통은 그냥 commonjs로 하고.
target은 빌드된 js 파일이 어떤 표준을 따를까 하는 것이다. Nodejs에서 돌릴 거라면, ES6의 import가 제대로 지원되지 않기 때문에 ES5 이하로 하는 게 좋을 것 같다. 프론트 소스로 빌드할 거라면 더 밑으로도 갈 수 있겠고.
sourcemap은 빌드시에 map 파일을 생성할지를 묻는다. 이걸 설정해놓고 빌드된 결과물을 보면 .map이란 녀석이 줄줄이 있을 것이다.
experimentalDecorator는 문법상의 데코레이터 사용을 허가할지를 물어본다. 쓰고싶으면 결면 되고,
outDir가 중요하다. 빌드될 경로다. build나 dist 등으로 빌드된 소스들을 한곳에 모아두는 게 좋다. 그리고 그곳의 js 파일들을 실행하도록 하면 된다.

exclude는 컴파일의 대상에서 제외할 목록이다. node_module은 어차피 다 빌드되어있으므로 제외해놨다.
exclude만 지정하면 해당 경로를 제외한 모든 곳을 컴파일 대상에 넣는다.
또, include로 컴파일의 대상을 지정할 수도 있는데, 난 하지 않았다.

그럼 이제 tsc만 실행해도,

tsconfig를 읽어서 컴파일을 해준다.

그렇다.

참조
https://typescript-kr.github.io/pages/tsconfig.json.html
https://vomvoru.github.io/blog/tsconfig-compiler-options-kr/