NPM Package 올리기
npm login
npm whoami // 로그인이 잘 되었는지 확인해보자
package.json 생성
npm init -y
// package.json
{
"name": "just-joke",
"version": "0.0.1", // major, minor, patch
"main": "index.js", // 실행 진입점
"license": "MIT"
}
// index.js (commonjs) 아무렇게 만들고
npm publish // 실행하면 npm package 바로 쉽게 생성된다.
// 단, 패키지명이 중복이면 안되기 때문에 검색해서 찾아보자.
CommonJS? ESModule?
CommonJS 가 아닌 ESM 도 적용시켜보자.
우리가 보통 쓰는 import / export 구문이 ESModule인데 다음과 같은 장점이 있다.
- 비동기적으로 작동함.
- tree-shaking이 가능.
- ESM에서 CJS를 사용하는 건 되지만, 그 반대는 안된다.
CJS는 구시대 유물이라 호환이 잘 되지만, 단점이 너무나 많다!
- ESM 및 타입스크립트 적용
문제점
위의 사이트를 따라가면 배포하는 과정을 알 수 있었는데 esbuild 패키지를 이용해서 esm과 cjs를 쉽게 유지보수 할 수 있다.
하지만, esbuild는 d.ts 컴파일을 지원하지 않아 tsconfig의 declaration 속성에 전역타입을 의존해야했음.
Github actions 이용해서 npm 배포 자동화
- npm page → Access Tokens 에서 publish token 발급
- Github Repo → Settings → Security → Secrets and variables → Actions → Repository Secrets 에서 발급받은 token 값 적용
- repo Actions 에서 workflow 작성! 자세한 건 아래 참조
npm version minor
git push origin --tags
—tags 로 push를 하면 스크립트에 v를 포함한 태그가 등록되어 workflow가 실행된다.
마무리
Chunk norris의 농담을 랜덤으로 받아오는 함수 라이브러리를 만들어보았다.
- 생각보다 쉽게 패키지가 등록되어 당황했는데, 이 것을 남발하거나 게임닉네임을 먹는 것 처럼 좋은 패키지 이름을 선정할 수도 있다 느꼈다.
- 패키지를 만들다보니 리액트로 사이트를 구축하는 개념이랑 아예 달라서 재밌었음.
- 사용자 입장에서 쉽게 쓸 수 있도록 문서화, 타입이나 자동완성, jsdoc 등 생각해야 할 게 많았고 패키지를 좀 더 관리하기 쉽게 하기 위해 자동화 방법이나 버전, 태그 관리에 대해 알게 되었다
'개발 (Dev) > Library' 카테고리의 다른 글
[hello-pangea/dnd] draggable id 관련 에러 해결 방법 (0) | 2024.02.28 |
---|---|
[Chrome Extension] 압축 파일 업로드 시 에러 (0) | 2024.01.31 |
상태 관리 라이브러리 Recoil의 여러 함수 정리 (0) | 2024.01.29 |