CJS

이전 게시글에서 TS는 내부 코드의 확장자를 변경하지 않는다는 것을 알 수 있었다.그렇다면 tsconfig.json 두개로 cjs와 esm 모두 대응되게 만든다는 것은 어려운 일이라는 것을 알 수 있다.하지만, 시작한 이상 여기서 포기하고 싶진 않았다. 그래서 번들러로 코드를 번들링한 결과를 npm에 배포하도록 했다. 왜 Rollup?Webpack과 Vite, Rollup등 다양한 번들러가 있으나 Rollup을 택했다.이유는1. 라이브러리 번들링이기에 HMR이나 개발서버가 필요하지 않았다. (결과물 테스트는 Jest와 Storybook을 활용하여 확인한다)2.  Rollup은 ES6형태로 번들링 결과를 반환해서 ESM코드에 대해서 트리쉐이킹을 지원한다.3. 사실 2번은 웹팩도 지원하지만, rollup이 ..
배경이전 게시글에서 라이브러리를 tsc만으로 컴파일해서 배포했다. 그랬더니 아래와 같은 일이 발생한다.CJS방식으로 require했을때도, ESM으로 import했을때도 잘 작동되지 않는다.왜 이런일이 발생했을까? 모듈 시스템그전에, 모듈 시스템 중 CJS와 ESM에 대해 살펴보자.CJSrequire와 module.exports를 통해 동작한다. 동기적으로 실행된다.또한, 메인스레드를 블로킹한다. 즉, 모듈의 코드 실행까지 다음 진행이 차단되는 것이다.exports되는 항목을 마치 object처럼 취급한다. 아래와 같은 코드가 있다고 하자.//module.jslet num=20;function setNum(n){ num=n;}function getNum(){ return num;}module.export..
_0422
'CJS' 태그의 글 목록