최근 스스로 사용할 목적으로 컴포넌트 라이브러리를 만들어보고 있었습니다. 라이브러리라면 당연히 npm에 배포하는 과정도 포함될 것입니다. 이 과정을 공유하는 것은 다른 사람들에게도 도움이 되는 지식일 것이라고 판단하여 이렇게 글을 작성하게 되었습니다. 저의 과정이 다른 누군가에게 참고가 되면 좋을 것 같습니다.
step 1 : npm login
먼저 npm 계정이 필요합니다. 만약 해당 계정이 없다면, https://www.npmjs.com/signup 이 사이트에서 회원가입을 합니다. 만약 있다면, 터미널에서 npm login 을 합니다.
npm loginusername, password, email을 입력하라고 합니다. 해당 prompt에 필요한 내용을 입력하고 enter를 해줍니다. 그러고나면 OTP를 입력하라고 합니다. 본인이 npm에서 사용한 email에서 확인합니다. 저는 naver 이메일을 사용했기 때문에 네이버 메일함을 확인했고, OTP 번호를 확인한 다음 입력해주었습니다.
step 2 : npm publish
login이 되었다면, publish를 할 준비가 되었습니다. publish를 하기 전에 package.json에 필요한 정보들을 입력합니다. 저는 아래와 같이 입력했습니다.
...
"name": "recoen-ui",
"version": "0.0.1",
"description": "다양한 컴포넌트를 미리 만들어놓고 재사용할 수 있는 컴포넌트 라이브러리",
"author": "Yechan Noh",
"license": "ISC",
...그리고 npm publish를 합니다.
npm publish
publish가 잘 되면 위와 같은 성공적인 메시지가 나옵니다.
Step 3: np로 버전 관리하기
어떤 라이브러리이든지, 버전을 관리하고 있습니다. 저희도 라이브러리를 만든다면 버전을 관리할 필요가 있을 것입니다. 흔히 sementic versioning이라고도 하는데, 아주 간략하게만 소개하자면 3가지 유형으로 버전을 관리할 수 있습니다.
- patch : 0.0.x
- minor : 0.x.0
- major : x.0.0
각 버전별로 x에 해당하는 영역에 변경된 버전업을 해주는 것입니다. 기본적으로는 이런 작업을 package.json에 명시하면서 수동적으로 해주어야 합니다. 하지만 np라는 라이브러리를 이용한다면, 라이브러리를 배포하는 과정과 버저닝을 하는 과정을 손쉽게 할 수 있습니다.
npm i np --save-devnp를 설치해줍니다. 그리고 package.json의 script에 np를 설정해줍니다.
scripts : {
...
"np" : "np"
}np를 실행합니다.
npm run np np를 실행하면 아래와 같은 prompt가 나옵니다.
y를 입력합니다. 그러면 아래와 같이 version 업데이트와 관련된 prompt가 나옵니다.
원하는 버전 업데이트를 화살키를 움직여 선택합니다. 그럼 np가 몇가지 check를 합니다.
그런데 저의 경우에는 Running tests using npm 부분에서 에러가 났습니다. 해당 에러는 다시 해결해줍니다. 해당 에러를 해결하기 위해서 package.json의 scripts 부분에 test와 관련한 적절한 script를 입력해줍니다. 저는 아래와 같이 작성했습니다.
"test": "echo \"No test specified\""이때 잊지 말아야 할 것은, np를 실행시킬 때는 working tree에 남아있는 작업이 없어야합니다. 모든 활동들이 commit된 상태에서 np를 실행시켜야합니다. 해당 변경 사항을 저장하고, 다시 np를 실행합니다.
이렇게 np가 성공적으로 수행된 것을 확인할 수 있습니다. 자동으로 버전도 업데이트했고, npm에 패키지도 publish 해주었습니다.
오늘은 npm에 자신이 만든 패키지를 배포하고, 버전 관리를 도와주는 도구를 살펴보았습니다. 도움이 되는 글이었길 바랍니다.
참고자료 : https://zellwk.com/blog/publish-to-npm/