NPM Package 올리기 & Github Action 이용해서 배포 자동화

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 지원) - 정현수 기술 블로그

문제점

위의 사이트를 따라가면 배포하는 과정을 알 수 있었는데 esbuild 패키지를 이용해서 esm과 cjs를 쉽게 유지보수 할 수 있다.

하지만, esbuild는 d.ts 컴파일을 지원하지 않아 tsconfig의 declaration 속성에 전역타입을 의존해야했음.

 

 

Github actions 이용해서 npm 배포 자동화

1. npm page → Access Tokens 에서 publish token 발급
2. Github Repo → Settings → Security → Secrets and variables → Actions → Repository Secrets 에서 발급받은 token 값 적용
3. repo Actions 에서 workflow 작성! 자세한 건 아래 참조

[CI/CD] github actions를 사용해서 npm 배포 자동화하기

GitHub Actions로 npm publish 자동화하기 :: Outsider's Dev Story

 

npm version minor
git push origin --tags 

—tags 로 push를 하면 스크립트에 v를 포함한 태그가 등록되어 workflow가 실행된다.

 

 

마무리

just-joke

Chunk norris의 농담을 랜덤으로 받아오는 함수 라이브러리를 만들어보았다.

• 생각보다 쉽게 패키지가 등록되어 당황했는데, 이 것을 남발하거나 게임닉네임을 먹는 것 처럼 좋은 패키지 이름을 선정할 수도 있다 느꼈다.
• 패키지를 만들다보니 리액트로 사이트를 구축하는 개념이랑 아예 달라서 재밌었음.
• 사용자 입장에서 쉽게 쓸 수 있도록 문서화, 타입이나 자동완성, jsdoc 등 생각해야 할 게 많았고 패키지를 좀 더 관리하기 쉽게 하기 위해 자동화 방법이나 버전, 태그 관리에 대해 알게 되었다