TypeScript-component, hook npm에 배포하기

TypeScript-component, hook npm에 배포하기

---

최근 반응형 pagination component와 hook을 작성했다.

이 둘을 npm에 배포해놓고 싶었다.(최근 package관련해서 경각심을 느끼게된 계기도 있고해서,, 겸사겸사)

 

npm에 배포하기 전 해야할 것

• 먼저 npm계정이 있어야한다.
• npm login으로 로그인해야한다.
• package.json 에 배포관련 스크립트, 정보를 추가해야한다.
• tsconfig.json 에 빌드관련 정보를 추가해야한다.

 

package.json

{
  "name":"배포할 패키지 명을 작성한다.",
  "main":"dist/index.js",
  "types":"dist/index.d.ts",
  "version":"0.0.1" //시맨틱버저닝을 따른다,
  "description":"패키지에 대한 설명",
  "keyword":["패키지","관련된","키워드"],
    "homepage":"패키지 깃 또는 링크걸고 싶은 곳",
    "bugs":{"url":"버그에 대한 링크를 제보받고 싶은 곳(보통 레포 이슈)", "email":"제보 이메일"},
    "author":{"name":"작성자", "email":"", "url":"작성자 깃 또는 홈페이지"},
  "license": "라이센스",
  "scripts": {
    "build":"rm -rf dist && mkdir dist && tsc" // tsc 컴파일러로 ts, tsx파일을 js, d.ts로 만들어주어야함
  },
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "strict": true,
    "outDir": "./dist", //컴파일러 결과가 저장될 곳
    "declaration": true, // d.ts를 생성하기 위한 옵션
    "module": "commonjs", //모듈 설정
    //이외는 default setting으로 두어도 됨
}

 

여기까지 수정했다면 npm run build 로 d.ts, js 파일이 dist에 잘 생성되는지 확인해보자.

 

배포

dist 하위의 결과물을 npm에 업로드한다.

npm publish 로 할 수 있다.

간혹, 401에러가 발생하는데, 다시 로그인하면 해결된다.

402에러는 private으로 upload해서 돈 내라라고 하는데, 관련 글 찾으면 해결법이 적혀있다. access public,,,

 

update

새로운 기능 또는 수정이 생기면 package.json 의 version을 업데이트해주고 publish해주어야한다.

 

구경가기

react-responsive-pagination-component

react-responsive-pagination-component

해당 패키지를 사용한 유저가 레포지토리에 나올줄은 몰랐는데 내가 만든 코드를 프로젝트에 사용한 것을 보니 기분이 좋네ㅎㅎ..