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 및 타입스크립트 적용
간단한 유틸 함수 NPM 라이브러리 배포해보기 (feat. TypeScript 지원, ESM 지원) - 정현수 기술 블로그
NPM 배포를 처음 해보는 사람들을 위해서 차근차근 가이드를 작성해 봤습니다.
junghyeonsu.com
문제점
위의 사이트를 따라가면 배포하는 과정을 알 수 있었는데 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 작성! 자세한 건 아래 참조
[CI/CD] github actions를 사용해서 npm 배포 자동화하기
git petch ... npm install npm build npm login ... npm publish 번거로운 npm 배포 작업을 자동화하는 방법은 없을까? github actions을 사용해서 npm publish 과정을 자동화해보자 npm package 정보 등록 package.json 정보(v9.6.
doqtqu.tistory.com
GitHub Actions로 npm publish 자동화하기 :: Outsider's Dev Story
npm 모듈을 배포해서 사용하는 경우 예전에는 [npm 레지스트리](https://www.npmjs.com/)를 사용했지만 이젠 [GitHub Packages](https://github.com/features/packages)가 있으므로 GitHub 저장소를 이용하고 Act...
blog.outsider.ne.kr
npm version minor
git push origin --tags
—tags 로 push를 하면 스크립트에 v를 포함한 태그가 등록되어 workflow가 실행된다.
마무리
just-joke
## Description. Latest version: 1.1.2, last published: a day ago. Start using just-joke in your project by running `npm i just-joke`. There are no other projects in the npm registry using just-joke.
www.npmjs.com
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 |