🌐 Browser Utils

{
  "private": false,
  "publishConfig": {
    "access": "public"
  },
}

📖 개요

browser-utils 패키지는 브라우저 환경에서 유용하게 사용할 수 있는 유틸리티 함수와 도구를 제공해요.

🎯 주요 목표

브라우저에서 동작하는 새 패키지를 추가하고 싶을 때, 이 패키지를 복사하여 개발의 시작점으로 삼을 수 있도록, 아래와 같은 목적들을 가지고 작성되었어요:

• DOM 등 브라우저 환경에서 제공되는 API 들을 활용할 수 있도록 기본적인 빌드 설정
• 코드 스플리팅 및 트리 쉐이킹을 지원하기 위한 Vite 기반 빌드 설정
• TypeScript 선언 파일 제공을 위한 설정
• npm 공개 배포 시 필요한 각종 package.json 관련 설정

📦 제공 기능

browser-utils 패키지는 브라우저 환경에서 동작하는 기능들의 예시로서, 다음과 같은 샘플 기능들을 포함하고 있어요:

• DOM: 브라우저 DOM 조작을 위한 유틸리티 함수 제공해요.
• MSW: Mock Service Worker와 관련된 유틸리티를 제공해요.
• String: 문자열 처리와 관련된 유틸리티 함수 제공해요.

🛠️ 빌드 방식 및 주요 설정

이 패키지는 Vite와 TypeScript를 기반으로 멀티 엔트리 라이브러리 형태로 빌드됩니다.
각 기능별로 별도의 엔트리(string, dom, msw)를 제공하며, 빌드 산출물은 dist 폴더에 ES 모듈(.es.js)과 CommonJS(.cjs.js) 형식으로 생성됩니다.

package.json

• exports: 각 기능별로 엔트리(./string, ./dom, ./msw)를 분리해 타입 선언(.d.ts), ES 모듈, CJS 모듈을 모두 제공합니다.
• publishConfig: "access": "public"으로 npm 공개 배포가 가능하도록 설정되어 있습니다.
• files: 빌드 산출물(dist)만 패키지에 포함되도록 지정합니다.
• scripts: Vite와 TypeScript를 활용한 빌드, 타입 체크, 테스트, MSW 초기화 등 다양한 개발 스크립트가 정의되어 있습니다.
• msw: MSW 워커 파일의 배포 디렉터리를 지정하는 설정이 포함되어 있습니다.

vite.config.ts

• 멀티 엔트리 빌드: shared/helpers 에서 제공하는 runWithGlob 유틸을 활용해 src 폴더 내의 각 엔트리 파일을 자동으로 감지하여 빌드 엔트리로 등록합니다.
• 라이브러리 모드: Vite의 라이브러리 모드를 사용해 ES/CJS 포맷으로 각각 빌드합니다.
• 타입 선언: vite-plugin-dts로 각 엔트리별 타입 선언 파일을 자동 생성합니다.
• 경로 별칭: vite-tsconfig-paths로 TypeScript 경로 별칭을 지원합니다.

tsconfig.json

• 모듈 해석: "moduleResolution": "bundler"로 번들러 친화적인 모듈 해석을 사용합니다.
• 타입 지원: 최신 ECMAScript 및 DOM 타입을 지원하도록 설정되어 있습니다.
• 엄격 모드: 타입 검사 및 린트 관련 옵션이 엄격하게 적용되어 있습니다