AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

핫 리로딩을 통한 로컬 UI 라이브러리 컴포넌트 개발

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Vue.js 애플리케이션을 개발하는 개발자, 로컬 UI 라이브러리 사용자

핵심 요약

  • Vite dev server 설정 : server.watch.include를 통해 라이브러리 소스 파일 감시 및 HMR 활성화
  • alias 설정 : my-ui-lib을 라이브러리 src 폴더로 매핑하여 dist 폴더 대신 .vue 파일 직접 로딩
  • package.json 구성 : exportspeerDependencies 정의로 라이브러리 모듈 정렬
  • pnpm 링크 사용 : pnpm link으로 라이브러리와 메인 앱 간 symlink 생성

섹션별 세부 요약

1. 로컬 UI 라이브러리 구조

  • src/components/.vue 파일로 컴포넌트 정의
  • src/index.js에서 ./components/Button.vue와 같은 상대 경로로 컴포넌트 내보냄
  • package.jsonmain, module, exports 설정으로 모듈 엔트리 지정

2. Vite config 설정

  • resolve.aliasmy-ui-lib을 라이브러리 src 폴더로 매핑
  • server.watch.include로 라이브러리 소스 파일 감시 활성화
  • optimizeDeps.includemy-ui-lib 의존성 미리 번들링

3. pnpm 링크 설정

  • pnpm link --global로 라이브러리 전역 링크
  • pnpm link --global my-ui-lib으로 메인 앱에서 라이브러리 연결
  • file: 의존성 사용 시 main-app/package.json"my-ui-lib": "file:../path-to-my-ui-lib" 추가

4. 메인 앱에서 컴포넌트 사용

  • import { Button } from 'my-ui-lib'로 라이브러리 컴포넌트 가져오기
  • components: { Button }로 컴포넌트 등록

5. alias 충돌 해결

  • @ alias 사용 시 my-ui-libsrc 폴더를 @lib로 매핑
  • 라이브러리 내 import Something from '@lib/utils/helper.js'로 경로 수정

6. 프로덕션 배포 옵션

  • Option 1 (권장) : main-appvite.config.js에서 라이브러리 소스 직접 컴파일
  • Option 2 : my-ui-lib/vite.config.jsbuild.lib 설정 후 dist 폴더 생성

결론

  • HMR 활성화 확인 : vite --debug로 HMR 이벤트 로그 확인
  • alias 경로 일치 : server.watch.include 경로가 라이브러리 src 폴더와 일치하는지 검증
  • Option 1 사용 권장 : 단일 빌드 스텝으로 개발 환경과 프로덕션 구성 일관성 유지