NPM 라이브러리 배포(TypeScript, CommonJS, ESM)

서론

프로젝트를 진행하면서 다양한 기능을 가진 여러 함수들을 제작하게 되었고 그중 다른 프로젝트에서도 사용 가능한 유틸 함수를 NPM에 배포해보려고 한다.

배포하려고 하는 유틸 함수는 주어진 기본 색조 값을 기반으로 유사한 색상 범위에서 무작위 색상을 생성하는 함수입니다. Gradient 효과를 위해 여러 색상을 만드는 데 사용할 수 있으며 색상은 HSL(색조, 채도, 명도) 값을 기반으로 합니다.

여러 자료를 찾아보며 CommonJS, ESMAScript에서 모두 적용 가능하도록 배포를 진행했다.

---

배포

폴더 구조

└─ 📦 src
  ├── 📂 dist
  ├── 📂 src
  │   ├── index.ts
  ├── build.js
  ├── package.json
  ├── tsconfig.json

esbuild를 이용하여 dist 폴더를 각각 CommonJS, ESM으로 컴파일을 진행했다.

NPM 로그인

$ npm login

npm publish를 통해 배포한다.

npm notice 
npm notice 📦  color-variation-generator@0.0.1
npm notice === Tarball Contents === 
npm notice 2.6kB README.md         
npm notice 2.1kB dist/index.cjs    
npm notice 3.3kB dist/index.cjs.map
npm notice 758B  dist/index.d.ts   
npm notice 1.2kB dist/index.js     
npm notice 3.2kB dist/index.js.map 
npm notice 1.1kB package.json      
npm notice 2.0kB src/index.ts      
npm notice === Tarball Details === 
npm notice name:          color-variation-generator               
npm notice version:       0.0.1                               
npm notice filename:      color-variation-generator-0.0.1.tgz     
npm notice package size:  3.4 kB                                  
npm notice unpacked size: 16.4 kB                                 
npm notice shasum:        6ff57638163d51b9c97d5b75d4631d27280a4dfe
npm notice integrity:     sha512-Tbjk21ir55PD2[...]DxXN7eMv2ojwA==
npm notice total files:   8                                       
npm notice 
npm notice Publishing to https://registry.npmjs.org/ with tag latest and default access
+ color-variation-generator@0.0.1

NPM 에 들어가면 정상적으로 배포가 된 것을 확인할 수 있다.

color-variation-generator

 

 

---

적용

새로운 프로젝트를 생성하여 color-variation-generator 패키지를 설치 후 적용해 보았다.

$ yarn add color-variation-generator

명령어를 통해 정상적으로 라이브러리가 설치된 것을 확인할 수 있다.

{
  "dependencies": {
    "color-variation-generator": "^0.0.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
}

10개의 BOX를 구현하여 각각 패키지를 통해 받아온 Hex 값으로 배경색을 지정해 주었다.

import { generateColorVariation } from "color-variation-generator";

const ColorVariationDemo = () => {
  const baseHue = 200;
  const hueVariance = 60;
  const gradientSteps = 10;

  const colors = Array.from({ length: gradientSteps }, (_, gradientIndex: number) =>
    generateColorVariation({
      baseHue,
      hueVariance,
      gradientIndex,
      gradientSteps,
    })
  );

  return <div>{/** Display the colors */}</div>;
};

export default ColorVariationDemo;

color-variation-generator를 이용하여 색상을 적용한 화면

참고

간단한 유틸 함수 NPM 라이브러리 배포해보기 (feat. TypeScript 지원, ESM 지원) - 정현수 기술 블로그