핫 리로딩을 통한 로컬 UI 라이브러리 컴포넌트 개발
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
Vue.js 애플리케이션을 개발하는 개발자, 로컬 UI 라이브러리 사용자
핵심 요약
- Vite dev server 설정 :
server.watch.include
를 통해 라이브러리 소스 파일 감시 및 HMR 활성화 - alias 설정 :
my-ui-lib
을 라이브러리src
폴더로 매핑하여dist
폴더 대신.vue
파일 직접 로딩 - package.json 구성 :
exports
및peerDependencies
정의로 라이브러리 모듈 정렬 - pnpm 링크 사용 :
pnpm link
으로 라이브러리와 메인 앱 간 symlink 생성
섹션별 세부 요약
1. 로컬 UI 라이브러리 구조
src/components/
내.vue
파일로 컴포넌트 정의src/index.js
에서./components/Button.vue
와 같은 상대 경로로 컴포넌트 내보냄package.json
에main
,module
,exports
설정으로 모듈 엔트리 지정
2. Vite config 설정
resolve.alias
로my-ui-lib
을 라이브러리src
폴더로 매핑server.watch.include
로 라이브러리 소스 파일 감시 활성화optimizeDeps.include
로my-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-lib
의src
폴더를@lib
로 매핑- 라이브러리 내
import Something from '@lib/utils/helper.js'
로 경로 수정
6. 프로덕션 배포 옵션
- Option 1 (권장) :
main-app
의vite.config.js
에서 라이브러리 소스 직접 컴파일 - Option 2 :
my-ui-lib/vite.config.js
에build.lib
설정 후dist
폴더 생성
결론
- HMR 활성화 확인 :
vite --debug
로 HMR 이벤트 로그 확인 - alias 경로 일치 :
server.watch.include
경로가 라이브러리src
폴더와 일치하는지 검증 - Option 1 사용 권장 : 단일 빌드 스텝으로 개발 환경과 프로덕션 구성 일관성 유지