TypeScript로 npm package에 배포하기 | React Custom hook 배포

이번에 WebRTC 관련 hook을 만들었는데, 공부하면서 구현하기까지 시간이 꽤 걸렸던 것 같다. 그래서 내가 만든 훅을 npm package에 올려서 다른 분들이 도움을 받을 수 있으면 좋지 않을까! 라는 생각에 처음으로! 올려봤다.

https://www.npmjs.com/package/@ruby-s/use-rtc

@ruby-s/use-rtc

1. npm 가입

npm에 패키지를 등록하기 위해서 https://www.npmjs.com/에서 가입하자.

2. package.json 파일 생성

npm init -y

-y 옵셥으로 바로 기본적인 pakage.json 파일을 생성해줍니다.

이제 내 패키지에 맞게 설정해줍니다.

{
  "name": "@ruby-s/use-rtc",
  "version": "1.0.0",
  "description": "React hook to connect to WebRTC",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/juyeong-s/RTC.git"
  },
  "author": "juyeong-s",
  "license": "MIT",
  "keywords": [
    "React",
    "Hook",
    "WebRTC",
    "useRTC"
  ],
  "bugs": {
    "url": "https://github.com/juyeong-s/RTC/issues"
  },
  "homepage": "https://github.com/juyeong-s/RTC#readme",
  "dependencies": {
    "socket.io-client": "^4.5.4",
    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },
  "devDependencies": {
    "@types/node": "^18.11.18",
    "@types/react": "^18.0.26"
  }
}

name

고유한 패키지명입니다.

version

패키지 버전입니다. 업데이트할 때마다 버전을 다르게 설정해주어야 합니다. 기존의 버전으로 다시 올리려고 할 경우 에러가 나므로 조심할 것.

description

패키지 설명입니다.

main

프로젝트에서 기본 진입 파일을 지정한다.
TypeScript의 경우 ts 파일을 빌드한 후 생성된 js 파일이 있는 위치로 지정해주어야 한다.
나 같은 경우, tsconfig.json 파일에 빌드된 파일이 dist폴더 안에 생성되도록 지정해주었으므로 main에 dist/index.js로 지정했다.

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist",
    "strict": true
  }
}

 

npm run build -> dist 폴더 안에 js 파일들 생성됨 -> 처음 진입할 파일을 main에 지정

types

이 속성을 TypeScript를 사용했을 경우에 필요하다. 위와 마찬가지로 build를 하면 dist폴더에 js 파일과 .d.ts 파일이 함께 생성된다.
이때 .d.ts 위치를 지정해주면 된다.

scripts

이 속성은 TypeScript를 사용했을 경우 build할 필요가 있기 때문에 쓰일 것 같다. build 명령어로 tsc 커맨드를 지정해서 ts파일을 컴파일하도록 한다.

repository

코드가 존재하는 주소를 지정하면 된다. npm docs로 패키지 저장소를 찾을 수 있게 해준다. 다음과 같이 npm 패키지 오른편에 보인다.

author

패키지 제작자의 이름을 지정한다. 이름만 해도 되고, 다음과 같이 해주어도 된다.

{
  "author": {
    "name": "juyeong-s",
    "email": "happyu9986@gmail.com",
    "url": "http://juyeong-s.com"
  }
}

license

라이센스를 지정한다.

keywords

패키지를 나타내는 대표적인 키워드들을 배열의 원소들로 설정해줍니다. 다음과 같이 하단에 보입니다.

bug

패키지에 문제나 버그가 있을 경우 보고할 수 있도록 URL을 지정한다. 보통 깃허브 이슈를 올리는 것 같다.

homepage

프로젝트 홈페이지로 연결되는 URL을 지정한다. 다음과 같이 npm 패키지의 오른편에 보인다.

dependencies

패키지의 배포 시 포함될 의존성 모듈을 지정한다.

peerDependencies

패키지의 호환성 모듈을 지정한다.

devDependencies

패키지의 직접 동작과 관련은 없지만, 이름 그대로 개발할 때 필요한 라이브러리를 지정한다. 보통 테스팅 라이브러리나 type관련 모듈들이 여기 들어간다.
개발에 필요한 라이브러리이기 때문에 배포할 때는 포함되지 않는다.

 

3. .npmignore 파일 설정

패키지에 배포하지 않을 파일이나 폴더를 지정해준다.
나는 ts로 작성했기 때문에 ts파일이 있는 폴더는 ignore해주고, js만 올리도록 했다.

// .npmignore
src/

.gitignore에는 빌드된 js는 제외하고 ts파일만 올리도록 했다.

// .gitignore
node_modules
.env
dist/

 

4. npm에 올리기

package.json 파일을 모두 설정해주었고, 배포할 hook파일도 모두 포함시켰다면 이제 npm 패키지에 올릴 준비가 되었다.

js로 작성했을 경우 npm publish로 바로 배포하면 되고,
ts로 작성했을 경우 npm run build 후 js 파일을 생성해 준 후 npm publish로 배포해주면 된다!