[npm] Typescript 패키지 배포하기

How to deploy typescript package to npm

회사에서 GraphQL을 도입을 했는데 Client에서 쉽게 사용하고자 GraphQL Client를 만들었습니다.

기존 Client보다 사용이 편리하다 하시고 조금 더 develop 하면 기존 클라이언트들보다 사용성이 좋은 package를 만들 수 있을 것 같아 npm에 배포를 하였습니다.

이번 편에서는 npm에 패키지를 배포하는 방법에 대해 포스팅해 보겠습니다.

1. npm 계정 세팅

먼저 npm 계정이 필요합니다.
https://www.npmjs.com 에서 npm 계정을 생성합니다.

이메일 인증까지 마친 후!
Cli에서 npm 로그인을 해줍니다

# npm login

2. package 정보 작성

다음으로 package.json에 패키지 관련 정보를 작성합니다.
주요하게 봐야 할 부분들은 다음과 같습니다.

• name: 패키지 이름
• version: 패키지 버전
• main: js에서 기본으로 import할 파일 위치
• types: ts에서 기본으로 import할 파일 위치
• author: 작성자 정보
• license: 라이센스 정보
• keywords: 패키지와 관련된 태그
• repository: 패키지의 repo 주소
• bugs: 버그 발생 시 리포트 받을 정보
• files: 배포 시 포함할 파일

3. 빌드

package.json 작성 후 빌드를 해줍니다
tsconfig.json에 typescript 빌드 후 배포될 위치를 lib 폴더로 잡았습니다

package.json의 files 정보와 맞추어줍니다

{
    "compilerOptions": {
        // ...
        "outDir": "./lib"
    }
}

4. 배포

.gitignore 파일은 깃에서 무시할 파일 정보들이 기록됩니다
.npmignore 파일을 만들어 배포하지 않을 폴더를 정해주어야 하는데 여기서는 src 폴더와 lib 폴더가 반대입니다

npm에는 lib 폴더만 배포되어야 git 에는 src 폴더만 기록되어야 합니다

각각의 ignore 파일을 만들어줍니다.

.gitignore

/lib

.npmignore

/src

파일 생성 후 npm 명령으로 배포를 할 수 있습니다

# npm publish

이전에 올린 버전이 있으면 배포가 안되어서 package.json의 버전을 잘 관리해주어야 합니다

그리고 git과 달리 lib 폴더가 배포되므로 build 후 배포해야만 합니다

package.json

"scripts": {
    "build": "tsc",
    "publish": "npm run build && npm publish"
}

이를 헷갈리지 않도록 npm에 publish script를 만들어서 사용하는 방법이 좋을 것 같습니다

CI/CD 구성을 아직 안하여서 빌드하지 않고 배포하는 실수를 했었는데 CD 구성 빨리 해서 실수하지 않도록 해야할 것 같습니다 :)