npm 배포하기

이제까지 라이브러리 안내 페이지만 열심히 꾸미고 npm을 배포할 생각을 하지 못했다. 사용자에게 코드를 안내하는 부분을 구상하다보니 라이브러리를 따로 만들어야 한다는 것을 생각하게 되었다.

 

처음 npm에 배포하다보니 어떻게 어떤 방식으로 배포하는지, 어떻게 코드를 짜야 사용자들이 import하며 사용할 수 있는지에 대한 지식이 없었다.

 

가장 먼저 npm 배포를 하기로 했다.

 

1. vite를 사용하여 프로젝트를 만든다.

2. 배포를 테스트할 간단한 컴포넌트를 만든다.

 

 

호출하면 문자열 one을 반환하는 컴포넌트를 작성했다.

 

3. 폴더 가장 밖, 루트에 index.ts 파일을 만든다.

4. index.ts에 만든 컴포넌트를 불러오고 다시 export 해준다.

 

 

5. typescript의 컴파일러 설정을 하기 위해 루트에 tsconfig-cjs.json과 tsconfig-esm.json파일을 만든다. ( cjs === commonJs, esm === esModule을 의미한다. )

tsconfig-cjs.json

tsconfig-cjs.json과 tsconfig-esm.json파일은 outDir, module를 제외하고는 모두 같은 속성과 같은 값을 사용한다.

( tsconfig-esm.json의 outDir, module 값은 "./lib/esm", "ESNext"로 작성했다.  )

 

6. package.json의 script객체에 tsc-build라는 명령어를 만든다. ( 값은 'tsc -p tsconfig-esm.json && tsc -p tsconfig-cjs.json' => 컴파일러를 tsconfig-esm.json에 맞춰 한번 tsconfig-cjs.json에 맞춰 한번 실행하라는 의미이다. )

 

 

7. package.json에 아래와 같이 속성에 대한 값을 넣어준다. (module, main, files는 필수!, private는 false로 해줘야된다. true로 설정하려면 돈을 내야한다...)

 

8. npm 회원가입 후 터미널에서 npm login으로 로그인을 해준다.

 

 

9. npm publish 명령어를 터미널에 사용하여 배포해준다! ( 안된다면 npm publish access public 명령어로 실행해보자! )

 

 

10. 다른 컴포넌트에서 사용해보기!

 

 

 

잘 되는 것을 볼 수 있다!

 

* 참조.

 https://hackids.tistory.com/132

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