비공개 npm package 만들어보기

  • 깃허브 레지스트리를 통해 (비공개) 패키지를 만들어보자
  • PAT을 통해 퍼블릭하지 않게 패키지를 배포해 볼 수 있다
  • 물론, 공개 패키지도 가능하다
  • 패키지 생성은 동일하고, 패키지를 받을 때만 차이가 있다
  • PAT : personal access token

PAT 발급

저장소, 패키지 만들기

  • package.json에 필수적으로 채워야 하는 항목들이 있어서,

  • 브라우저로 github에 접속해서 저장소 하나를 만들어 로컬로 클론하고
    npm init -y 하는 것을 추천한다

  • 타입스크립트로 만든다

terminal
1
2
3
git clone https://github.com/chinsun9/hello-package.git

tsc --init

디렉터리 구조

디렉터리 구조
1
2
3
4
5
6
7
8
9
10
11
12
.
├── dist
│ ├── index.d.ts
│ └── index.js
├── src
│ └── index.ts
├── .gitignore
├── .npmignore
├── .npmrc
├── package.json
├── README.md
└── tsconfig.json
  • 디렉터리 구조는 마음대로

  • 나는 위처럼 구성했다

  • src 밑에 ts 코드를 작성하고,

  • tsc 명령으로 dist 아래 트랜스파일 된 js를 배포하는 방식이다

src 작성

src/index.ts
1
2
3
4
5
export class MyClassA {}

export class MyClassB {}

export class MyClassC {}
  • 원하는 기능을 구현하고 외부에서 사용 가능하도록 export키워드를 붙여준다

tsconfig.json 설정

  • 타입스크립트로 코드를 작성하고,
  • tsc로 트랜스파일한다. 결과로 js파일이 생성된다
  • 패키지를 인스톨한 사람들은 js파일을 사용하게 된다
tsconfig.json
1
2
3
4
5
6
7
8
9
10
11
{
"compilerOptions": {
// ...
"declaration": true /* Generates corresponding '.d.ts' file. */,
// ...
"outDir": "./dist",
"rootDir": "./src"
// ...
},
"include": ["src"]
}
  • tsc --init 기본값으로 생성된 상태에서 위 옵션만 수정해주었다
  • declaration ; d.ts파일을 생성해서 자동완성에 도움을 준다
  • outDir ; tsc 명령의 결과로 생성되는 js 위치
  • rootDir, include ; root ts 파일 위치

.gitignore

.gitignore
1
2
dist
node_modules
  • 커밋에서 무시할 디렉터리, 파일을 나열한다

.npmignore

.npmignore
1
2
3
src
test
tsconfig.json
  • 패키지를 publish 할 때 무시할 디렉터리, 파일을 나열한다

.npmrc

  • 워크스페이스에 위치해도 되고,
  • 어느 워크스페이스든 상관없이 전역적으로 적용하려면 ~/.npmrc에 넣어주면 된다
.npmrc
1
//npm.pkg.github.com/:_authToken=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  • 처음에 발급받은 토큰을 xxxx... 부분에 넣어준다
  • 자신의 토큰은 아무래도 전역으로 적용하는 게 좋아 보인다

package.json

package.json
1
2
3
4
5
6
7
8
9
10
11
12
{
"name": "@chinsun9/hello-package",
"version": "1.0.0",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"repository": "https://github.com/chinsun9/hello-package.git",
"author": "chinsun9 <chin_sung@naver.com>",
"license": "MIT",
"publishConfig": {
"registry": "https://npm.pkg.github.com/"
}
}
  • 몇 가지 수정사항이 있다
  • name, main, types, publishConfig를 적절하게 수정한다
  • name ; @chinsun9/처럼 골뱅이 자기 이름을 넣어준다
  • main ; 트랜스파일 결과로 메인 파일을 넣어준다
  • types ; 자동완성을 위해서 생성된 d.ts파일을 넣어준다
  • publishConfig ; registry를 깃허브로 하겠다는 설정이다

패키지 배포

  • npm publish
  • 저장소에 들어가서 패키지가 잘 배포되었는지 확인하다

배포한 패키지 인스톨해보기

  • github registry에 등록된 패키지는 퍼블릭 일지라도 PAT이 필요하다
  • 퍼블릭일 때 패키지 주인이 생성한 토큰이 아니다
  • 각자 자기 자신의 토큰으로 가능하다..!
  • 비공개 패키지라면 패키지 주인이 생성한 토큰이 있어야 한다
  • 패키지 주인은 read:packages 권한이 있는 토큰을 알려주면 다른 사람, 컴퓨터에서 패키지를 인스톨할 수 있다
  • 임시 디렉터리를 하나 만들고 npm init -y한다
  • .npmrc를 생성하고 내용을 추가한다
.npmrc
1
2
//npm.pkg.github.com/:_authToken=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
@chinsun9:registry=https://npm.pkg.github.com/
  • 워크스페이스의 .npmrc 또는 유저 홈 디렉터리의 .npmrc 에 위 내용을 추가한다

  • @chinsun9:registry=https://npm.pkg.github.com/

  • @chinsun9으로 시작하는 패키지는 https://npm.pkg.github.com/ 에서 가져오라고 알려주자

헷갈린 점

  • 퍼블릭한 패키지도 PAT가 필요했다
  • 당연히 퍼블릭한 패키지에는 토큰이 필요 없을 거라 생각했다
  • 그래서 어쩔 수 없이 패키지 오너의 토큰이 필요할 거라 생각했다
  • 근데, 패키지 주인이 생성한 토큰이 아니더라도 패키지를 인스톨할 수 있었다
  • 즉, github 계정을 가지고 있고, read:packages 토큰을 생성하면 퍼블릭 패키지를 인스톨할 수 있다

참고

내 첫 패키지

GitHub 패키지 저장소 호스팅: GitHub Package Registry 시작하기

d.ts 만들기

*rc 뜻

Author

chinsung

Posted on

2021-06-17

Updated on

2021-08-07

Licensed under

댓글