Vite로 라이브러리 만들기

개발을 하다보면 필요에 따라 라이브러리를 만들어 배포해야 되는 상황이 발생하기도 합니다.

저의 경우 사내에서 개발을 하다가 문뜩 전사내 사용하는 모든 hook들을 모아 공용으로 사용 할 수 있는 react hook 라이브러리가 있으면 좋지 않을까? 라는 생각으로 vite로 내부용으로 react hook 라이브러리를 배포하여 사용하고 있습니다.

이 글은 vite를 통해 라이브러리 셋팅 및 배포하는 방법을 기록하기 위한 것으로 참고만 해주시길 바랍니다ㅎ

우선 아래 명령문 실행을 통해 vite기반의 react 프로젝트를 생성합니다. 저의 경우 pnpm으로 했지만, yarn 혹은 npm으로 해도 상관없습니다.

build시 타입을 생성해주는 vite-plugin-dts 설치

프로젝트내 불필요한 파일들 index.css , App.css , App.tsx, public 을 제거합니다. (삭제하지 않아도 상관없습니다)

이후 hooks 폴더내 여러 커스텀 훅을 작성한 뒤 index.tsx 에서 export 할 수 있도록 합니다.

vite.config 파일에 build.lib 옵션을 사용하여 라이브러리 모드로 빌드를 진행할 수 있도록 다음과 같이 수정합니다.

hooks 폴더내의 파일들을 build하기 위해 tsconfig 파일의 include를 수정합니다

이후 빌드를 진행하면 관련 파일들을 포함하고 있는 dist 폴더가 생성되고 내부에 다음과 같이 d.ts 타입 파일과 esm , cjs 두 가지 버전의 파일이 생성된것을 확인 할 수 있습니다.

* subpath export를 지원하고자 하는 경우 배열 혹은 객체 형식으로 entry 목록을 지정해주고 package.json 파일 exports 옵션에 subpath 관련 설정해주시면 됩니다.

다음으로 package.json 에 라이브러리를 배포하기 위한 설정을 추가 해줍니다.

exports: main 필드와 동일하기 진입 경로 설정 가능, 추가적으로 conditional exports ,subpath exports 지원

배포 이전에 build로 생성된 dist 에 있는 파일들을 패키지 처럼 설치하여 정상적으로 작동하는지 테스트를 해보고 싶다면 아래와 같이 link 명령어를 입력하여 심볼릭 링크를 생성합니다.

node_modules 를 확인해보면 @mylib/hooks 폴더가 생성된것을 확인 할 수 있으며 import 하여 테스트 할 수 있게 됩니다.

테스트가 끝났을 경우 unlink 명령을 실행하여 심볼릭 링크를 삭제하면 node_modules 내 생성됬던 @mylib/hooks 폴더가 빈 폴더가 됩니다.

npm login 을 실행하여 로그인 한 뒤 npm publish 를 실행하면 배포가 완료됩니다.

한 가지 주의 해야 할 점은 유료계정이 아닌 경우에는 public 으로 만 배포가 가능하며, 재배포시 반드시 package.json 내 version 을 변경해줘야 합니다.

참고: