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

웹/프론트엔드

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

이민훈 2022. 7. 3. 05:28

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

배포를 위해선 먼저

https://www.npmjs.com/

npm

Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java

www.npmjs.com

npm에 회원가입을 하셔야 하고 로컬에서 npm login 명령어를 통해 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에 배포합니다.