tsup을 활용한 번들링

번들링

번들링은 여러 모듈로 나눠진 스크립트 코드들을 단일또는 여러 개로 만들어주는 도구 입니다. J Design System은 타입스크립트를 활용한 정적타입언어로 개발된 프로젝트이기 때문에, 다음 세 가지의 역할을 수행할 수 있는 번들러 도구를 선택해야 했습니다.

• 타입 유형 정보를 제공하기 위한 .d.ts 변환 기능
• ES Module 방식 모듈 번들 제공 (esm)
• CommonJS 방식 모듈 번들 제공 (cjs)

최종적으로 tsup 번들링 도구를 사용하여 빌드 단계에서 각 컴포넌트 패키지들을 번들링을 구성하였습니다.

tsup

tsup은 TypeScript 라이브러리용 프로젝트에 간단하고 빠른 방법으로 번들링을 진행할 수 있어 선택한 번들러입니다. 기본적으로 treeshaking을 지원해 최종 번들 파일에 포함되지 않는 코드를 제거하여 번들 크기를 최소화할 수 있고, esm및 cjs방식의 모듈 번들링을 제공하여 다양한 환경에서 라이브러리를 사용할 수 있도록 구성하였습니다.

{
  "name": "@jdesignlab/button",
  "version": "0.7.1",
  "packageManager": "yarn@3.3.1",
  "main": "src/index.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "test": "jest",
    "build": "tsup src --dts --format esm,cjs",
    "build:clean": "rimraf dist/"
  },
  ...
}

./dist
├── chunk-3ZBFSGCS.mjs
├── chunk-NESRTHRC.mjs
├── chunk-OGLBQ4Y3.mjs
├── components
│   ├── Button.d.ts
│   ├── Button.js
│   └── Button.mjs
├── index.d.ts
├── index.js
├── index.mjs
├── styles.d.ts
├── styles.js
├── styles.mjs
├── types.d.ts
├── types.js
└── types.mjs