[React/Typescript] 리액트 컴포넌트 npm 라이브러리로 배포하기

개발자라면 한 번쯤 자기의 코드를 오픈소스로 배포해 보고 싶다는 생각을 해보셨을 거라 믿습니다.

 

저도 다운로드 수는 작지만 직접 만든 리액트 컴포넌트들을 배포 후 꾸준히 업데이트 중에 있습니다.

 

오늘은 리액트에서 만든 컴포넌트나 훅들을 npm 라이브러리로 배포하는 법을 알아보겠습니다.

 

저는 먼저 vite에서 지원해 주는 npm create vite로 react-ts 프로젝트를 생성하였습니다.

 

create-react-app 또는 명령어 없이 리액트 환경을 구성하셔도 됩니다.

 

npm create vite로 생성된 프로젝트 폴더 내의 package.json

그런 다음 컴포넌트를 하나 만들어보겠습니다.

 

Button 컴포넌트

components/index.ts에서 한번...

 

 

/index.ts에서 한번 모듈을 내보내 주겠습니다.

 

 

그런 다음 ts파일을 빌드하기 위해

 

tsconfig-cjs.json 파일과 tsconfig-esm.json 파일을 만들어주겠습니다.

 

esm 방식만 지원하겠다고 하면 cjs.json 파일은 없어도 됩니다.

 

Common JS 모듈 빌드를 위한 tsconfig-cjs.json

ES 모듈 빌드를 위한 tsconfig-esm.json

루트의 index.ts 파일과 src/components 폴더만을 포함해 빌드 할 것이고

 

각각 빌드 된 파일들은 ./lib/cjs, ./lib/esm 폴더로 나오게 됩니다.

 

ts 빌드를 위한 명령어 추가

package.json에 tsc-build라는 명령어를 만들어두고 빌드가 되는지 테스트해 보겠습니다.

 

제대로 빌드가 됐고 이제 해당 빌드 된 파일들을 배포해 보겠습니다.

 

ts 파일들을 빌드 해 lib 폴더에 빌드 파일이 생성된 모습

package.json에 설명이나 레포지토리 주소, 라이센스 등 필요한 정보들을 추가해 주시고

 

module, main, files 속성은 꼭 추가해 주셔야 합니다.

 

오픈소스로 배포하기 위해 private 속성은 false로 바꿔주시면 됩니다.

 

배포를 위해 package.json 파일을 수정

배포를 위해선 먼저

 

https://www.npmjs.com/

npm

 

npm에 회원가입을 하셔야 하고 로컬에서 npm login 명령어를 통해 npm에 로그인 해줍니다.

 

배포를 위해선 npm login 명령어로 npm에 로그인이 필요하다.

그런 다음 만들어둔 명령어로 배포를 해보겠습니다.

 

npm run publish:npm 명령어로 배포 중...

npm에 제대로 배포가 되었네요!..

 

배포된 라이브러리

라이브러리를 계속 업데이트하며 배포하기 위해 아까 만들어둔 명령어들을 조금 수정해 보겠습니다.

 

npm을 통해 rimraf, copyfiles 라이브러리를 다운받아 주시고

 

"clean": "rimraf lib",
"copy-files": "copyfiles README.md lib",
"tsc-build": "npm run clean && tsc -p tsconfig-esm.json && tsc -p tsconfig-cjs.json && npm run copy-files",
"publish:npm": "npm run tsc-build && npm publish"

 

tsc-build와 publish:npm 명령어는 수정, clean 과 copy-files 명령어를 추가해 주시면 됩니다.

 

이제는 npm run publish:npm 한 줄로 배포가 자동으로 됩니다.

 

publish:npm 명령어를 입력하는 순간 tsc-build 명령어가 먼저 실행되는데

 

lib 폴더를 싹 다 지운 후 다시 빌드하고 README.md 파일을 lib 폴더로 복사 후 npm에 배포합니다.

 

 

새로운 프로젝트에서 배포한 프로젝트의 컴포넌트를 불러다 써보겠습니다.

 

 

App.tsx에서 Button 컴포넌트를 임포트 해준 후..

 

 

성공적으로 앱이 떴습니다.

 

 

72시간 내에 배포된 npm은 unpublish 할 수 있으니 한 번쯤 직접 만든 컴포넌트나 훅들을

 

배포해 보셔도 좋을 것 같습니다.