[NPM 패키지] 개발 및 배포

 

NPM 패키지 개발을 위한 프로젝트 셋팅 및 배포

 

 

패키지 디렉토리 생성 및 npm init

cd npm-package-test
npm init -y

위 까지 진행했다면
사실 배포할 준비는 끝났다.

{
  "name": "test-npm",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

위와 같은 package.json 파일이 만들어졌을텐데,
이제 npm 에 로그인 한 뒤 json 파일에 있는 name 으로 npm 패키지가 올라가게 된다.

이름이 중복인 경우 올릴 수 없으니, 

npm info 패키지명

으로 패키지가 있는지 없는지 여부를 확인하고 중복이 아닌 패키지 명으로 올리면 된다.

npm publish --access public

이렇게 하면 배포는 끝났다.

하지만 우리는 패키지를 개발해야 될 것이므로, 해당 패키지를 개발하면서 코드 변경사항을 즉시 확인하면서,
개발하는 방법에 대해 작성하겠다.

 

 

NPM 패키지 개발

 

 

패키지는 위의 test-npm 디렉토리에서 개발을 진행하게 될 것이고, 우리는 이 패키지를 사용할 프로젝트 하나를 셋팅한다.

npm create vite@latest my-app --template react-ts

 

예를들어, input 과 관련된 패키지를 제공하고 싶을 때, 우리는 패키지에 다음과 같이 만들 수 있을 것이다.

//해당 폴더위치 /src/NumberInput.tsx

import { ChangeEventHandler, useCallback } from "react";
import { NumberInputProps } from "./types";

const NumberInput = ({ ...props }: NumberInputProps) => {
  const isBlank = props.blank ?? true;

  const regexp = useCallback((inputValue: any) => {
    if (isBlank) {
      const allowedRegex = /^[0-9\s]+$/;
      return allowedRegex.test(inputValue);
    } else {
      const allowedRegex = /^[0-9]+$/;
      return allowedRegex.test(inputValue);
    }
  }, []);

  const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {
    const propsOnChange = props.onChange;

    if (e.target.value.trim() == "") {
      propsOnChange?.(e);
      return;
    }

    if (regexp(e.target.value)) {
      propsOnChange?.(e);
    }
  };

  return (
    <>
      <input {...props} onChange={handleChange} ref={props.ref} />
    </>
  );
};

export default NumberInput;

그리고 난 뒤 index.ts 에서 해당 컴포넌트를 export 해줬다.

// 해당 폴더위치 /src/index.ts

export { default as NumberInput } from "./NumberInput";

 

이 패키지를 dist 에 빌드하였다.

물론 이런 방식으로 개발 한 뒤, npm-publish 를 통해 패키지를 배포 할 것이다.

 

패키지를 개발하면서 코드 변경사항을 즉시 확인 방법

 

 

패키지를 배포하지 않고, npm link 를 통해 패키지를 적용해 볼 수 있다.

// 패키지 폴더
npm link

npm link 가 제대로 됬는지는 아래 명령어로 확인 가능하다.

npm list -g --depth=0

출력 값에서 test-npm 이 존재한다면 link 가 성공했다.

우리는 이 link 된 패키지를 가지고 테스트할 프로젝트에 반영하면 된다.

// 테스트 할 프로젝트
npm link test-npm

 

여기 까지 성공했다면, 빌드가 필요한 패키지, 빌드가 필요하지 않은 패키지가 있을텐데,
빌드가 필요하지 않다면, js나 ts 파일을 바꾸면 테스트 프로젝트에서 패키지 변경사항이 자동으로 적용될 것이고,
빌드가 필요한 패키지라면 추가 작업을 하나 해줘야한다.

//패키지
  "scripts": {
    "build": "tsc",
    "watch": "tsc -w",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

패키지 프로젝트에서, package.json 에 watch 를 추가하자.
그 후,

npm run watch

이제 파일을 저장할 때 마다, 자동으로 빌드가 된다.

이제 우리는 패키지에서 변경사항을 바로바로 확인하면서 개발할 수 있는 환경을 갖추었다.
유용한 패키지들이 더 많이 생겼으면 좋겠다 :)