웹팩과 함께 타입스크립트를 사용할때 보통 ts-loader 혹은 awesome-typescript-loader 둘 중 하나를 사용한다. 진행중인 프로젝트에서 스토리북에 babel-loader로 타입스크립트 파일을 불러와서 빌드 하고 있었는데, 컴포넌트가 매우 많이 쌓이자 빌드 속도가 굉장히 오래 걸리기 시작했다. 이 글은 그 원인과 해결책에 대해서 정리하는 글이다.
더 빠른 빌드
우선 원인에 대해서 알아보자. 타입스크립트의 semantic checker는 프로젝트가 재빌드 될때마다 모든 파일을 검사한다. string타입에 number값이 들어가진 않았는지 등을 검사하는것이다.
이것에 대한 해결책은 단순하게는 transpileOnly: true 옵션만 켜주면 된다. 하지만 이렇게만 해주면 타입체크를 수행하지 않기때문에 타입스크립트를 써써 프로젝트의 안정성을 높이고자 하는 목적을 이루지 못한다. 또한 d.ts파일도 출력되지 않는다.
말 그대로 ts -> js로 문법 변환(transpile)만 해준다. 실제로 제대로된 타입에 제대로된 값이 들어갔는지는 검사하지 않는다.
그래서 우리는 저 옵션을 켜주되, 다른 추가 조치를 해야한다.
fork-ts-checker-webpack-plugin
이 웹팩 플러그인은 타입 체크 과정을 별도의 분리된 프로세스에서 실행되게끔 한다. 한마디로, 타입스크립트 컴파일러에 transpileOnly: true 옵션을 줘서 빠르게 트랜스파일링하되, 별도의 프로세스에서 타입체크도 하는것이다.
이렇게 하면 타입스크립트의 안정성 + 빠른 빌드 속도 두마리 토끼를 잡을 수 있게 된다.
스토리북에서 사용하기
현 시점에서의 스토리북에는 fork-ts-checker-webpack-plugin가 내장되어 있어서 옵션만 켜주면 된다.
storybook의 main.js파일에서 module.exports 객체 안에 아래 내용만 넣어주면 된다.
typescript: {
check: false,
checkOptions: {},
reactDocgen: 'react-docgen-typescript',
}자세한 옵션은 공식문서를 참고하자.
