P&M 프로젝트의 공용 UI 컴포넌트 패키지인 `@ph-mold/ph-ui`를 개발하고 배포하는 절차를 정리한 문서입니다.
npm install @ph-mold/ph-uiP&M 프로젝트의 공용 UI 컴포넌트 패키지인 @ph-mold/ph-ui를 개발하고 배포하는 절차를 정리한 문서입니다.
---
``bash`
npm version patch # 또는 minor / major
| 타입 | 설명 |
| ----- | ------------------ |
| patch | 버그 수정 |
| minor | 기능 추가 (호환됨) |
| major | Breaking Changes |
> 실행 시 package.json이 자동 수정되고, Git 태그가 생성됩니다.
---
`bash`
npm run build
- Vite 기반 빌드
- dist/ 폴더에 JS, CSS, 타입 파일 생성
---
`bash`
npm publish --access public
> @ph-mold/ph-ui처럼 scope 패키지는 반드시 --access public 옵션이 필요합니다.
---
`bash`
npm view @ph-mold/ph-ui
npm view @ph-mold/ph-ui versions
---
`bash`
npm install @ph-mold/ph-ui
---
`bash`
npm run build && npm version patch && npm publish --access public
---
| 문제 | 원인 | 해결 방법 |
| ------------------------- | -------------------------------------------- | ---------------------------------------------------------------- |
| 404 Not Found | 레지스트리 설정 오류 | npm config get registry → https://registry.npmjs.org/로 설정 |types
| 타입 자동완성 안됨 | 또는 exports 누락 | types, exports["."] 정확히 설정 |--legacy-peer-deps
| peer dependency 충돌 | 프로젝트의 react/tailwindcss 버전 불일치 | 해당 버전 맞춰서 설치하거나 사용 |main/module/types
| 설치는 되는데 import 에러 | 또는 exports 설정 오류 | 경로 및 필드 확인 필요 |
---
`bash``
npm whoami # 현재 로그인된 사용자 확인
npm login # 로그인
npm logout # 로그아웃
npm config get registry # 현재 레지스트리 주소
npm config set registry https://registry.npmjs.org/ # 기본 레지스트리로 변경
npm cache clean --force # 캐시 삭제
---