Intro
tslib 버전과 관련된 이슈가 발견되었다!
그래서 tslib 자체를 사용할지 말지에 대해서 논의해보았고,
우리는 번들 사이즈를 줄이는 것보다 타 패키지들의 tslib 버전과의 충동 등 다양한 이슈가 발생할 수 있는 가능성 자체를 배제하는 것이 더 중요하다고 판단했다.
그래서 tslib을 사용하지 않고 helper 함수들을 그냥 내부에 구현되도록 하는 것으로 결론났다!
그래서 어떻게 헬퍼 함수들을 하드 코딩 되게 했는지에 대해서 이야기 해보고자 한다.
tslib란?
헬퍼 함수란?
TypeScript의 기능은 최신 JavaScript(예: ES6 이상) 사양을 기반으로 작성된다. 하지만 타겟이 ES5 이하인 경우나 호환성을 보장해야 할 때, 이러한 고급 기능을 낮은 수준의 JavaScript로 변환하기 위해 헬퍼 함수가 필요하다.
TypeScript에서 헬퍼 함수(helper functions) 는 컴파일된 JavaScript 코드에서 TypeScript의 고급 기능을 구현하기 위해 자동으로 생성되는 함수들이다.
(eg. 상속, 비동기 처리, 스프레드 연산자 등의 기능)
tslib과의 연관
이러한 헬퍼 함수들이 반복적으로 복사된다면, 번들 사이즈가 불필요하게 커진다.
이러한 문제를 해결하기 위해서 Typescript에서 자체적으로 제공하는 라이브러리이다.
어떻게 사용?
- dependency에 tslib 추가
npm install tslib // npm
yarn add tslib // yarn참고 : dev-dependecy가 아닌 dependecy에 추가해야지 빌드에 포함된다.
** 특정 버전의 dependecy를 추가하기 싫다면, peer-dependency로 지정해주는 방법도 있다.
-
tsconfig
importHelpers: true설정- 해당 옵션을 켜두면, 헬퍼 함수들을 복사하는 대신 tslib에서 import해서 사용한다.
- 공식 문서 : https://www.typescriptlang.org/tsconfig/#importHelpers
-
(옵션) tsconfig
"noEmitHelpers": true설정- 해당 옵션은 헬퍼 함수들을 직접 작성하지 않도록 한다.
- 공식 문서 : https://www.typescriptlang.org/tsconfig/#noEmitHelpers
나의 경험
하지만 나는 거꾸로 가야한다! tslib의 사용을 없애는 처리를 했다.
내가 수정한 프로젝트의 tsconfig에는 importHelpers: true만 설정 되어있었다. 따라서 해당 옵션을 삭제하니까.. 발생한 문제는 다음과 같았다.
ReferenceError: __extends is not defined
헬퍼 함수를 사용은 하지만, import도 되지 않고 하드 코딩도 되지 않는 문제가 발생했다..
해결
tslib의 import를 막았으니까 당연히 require하는 코드가 사라진 것은 이해가 되었다.
근데 왜 하드 코딩이 안되는지 생각해봤을 때, 이유를 알 수가 없었다.
추가적인 옵션들을 찾아보니까 noEmitHelpers라는 옵션을 찾을 수 있었다.
그래서 해당 옵션까지 false로 설정 해주니까 원하는 대로 작동했다..
의문 🤔
근데 tslib 사용의 default가 true이지 않을 것 같아서 importHelpers, noEmitHelpers의 default value를 찾아봤는데 false란다..
아무래도 rollup 캐시 관련 문제인듯하다..
개발자가 가장 경계해야 할 것 1위.. "캐싱"...
인듯...
