1
2
3
4
5

# pwd: npm package
npm link

# pwd: other project
npm link -S {packagename}

상황

• 패키지를 업데이트하고 퍼블리쉬한다
• 해당 패키지를 사용하는 프로젝트에서 install 한다
• 테스트한다
• 퍼블리쉬를 해야지 확인할 수 있는 불편함이 있다. 테스트용 퍼블리쉬를 할 때마다 버전이 계속 증가한다

해결

• npm link 명령을 통해 퍼블리쉬 없이 테스트해볼 수 있다
• 글로벌 모듈이 설치되는 위치에 심볼릭 링크가 추가된다
• npm link -S {packagename}명령으로 로컬의 패키지를 설치한다

• npm r -g {packagename} 테스트를 다 끝내서 필요 없어졌다면 심볼릭 링크를 삭제

참고

• https://www.jamesqquick.com/blog/how-to-test-npm-packages-locally
• https://docs.npmjs.com/cli/v8/commands/npm-link

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

• PAT : personal access token

PAT 발급

• github에 로그인하고,
• https://github.com/settings/tokens/new
• write:packages 권한의 personal access token을 생성한다

저장소, 패키지 만들기

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

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

• 타입스크립트로 만든다

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 작성

1
2
3
4
5

export class MyClassA {}

export class MyClassB {}

export class MyClassC {}

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

tsconfig.json 설정

• 타입스크립트로 코드를 작성하고,
• tsc로 트랜스파일한다. 결과로 js파일이 생성된다
• 패키지를 인스톨한 사람들은 js파일을 사용하게 된다

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

1
2

dist
node_modules

• 커밋에서 무시할 디렉터리, 파일을 나열한다

.npmignore

1
2
3

src
test
tsconfig.json

• 패키지를 publish 할 때 무시할 디렉터리, 파일을 나열한다

.npmrc

• 워크스페이스에 위치해도 되고,
• 어느 워크스페이스든 상관없이 전역적으로 적용하려면 ~/.npmrc에 넣어주면 된다

1

//npm.pkg.github.com/:_authToken=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

• 처음에 발급받은 토큰을 xxxx... 부분에 넣어준다
• 자신의 토큰은 아무래도 전역으로 적용하는 게 좋아 보인다

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를 생성하고 내용을 추가한다

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 토큰을 생성하면 퍼블릭 패키지를 인스톨할 수 있다

참고

내 첫 패키지

• https://github.com/chinsun9/hello-package

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

• https://musma.github.io/2019/09/30/github-package-registry.html

d.ts 만들기

• https://www.typescriptlang.org/docs/handbook/declaration-files/dts-from-js.html

*rc 뜻

• https://stackoverflow.com/questions/52800196/what-does-the-rc-stand-for-in-the-names-of-configuration-files
• https://stackoverflow.com/questions/11030552/what-does-rc-mean-in-dot-files