GitHub Packagesで複数パッケージを1リポジトリに登録する

自分で作ったパッケージをnpmに登録するのは怖いのでどこか良い置き場ないかと思ったら、GitHubがnpmなどのパッケージの置き場として使えるようになっていたことを知った。

ここでは、npm向けのパッケージをGitHub Packagesを使って、GitHub上の1つのリポジトリに登録する手順をまとめる。(基本的には「[GitHub Packagesについて](https://docs.github.com/ja/packages/publishing-and-managing-packages/about-github-packages)」の手順に従えば良い)

# GitHubリポジトリのPAT作成
まず「[GitHub Packagesについて](https://docs.github.com/ja/packages/publishing-and-managing-packages/about-github-packages)」の「[トークンについて](https://docs.github.com/ja/packages/publishing-and-managing-packages/about-github-packages#about-tokens)」を参考に、パッケージを登録したいリポジトリのPersonal Access Token(PAT)を作成する。トークンのスコープ(権限)は、「[トークンについて](https://docs.github.com/ja/packages/publishing-and-managing-packages/about-github-packages#about-tokens)」に書かれているように、パッケージを登録するために必要なものを正しく設定すること。

# npmの設定
「[GitHub Packagesで利用するためにnpmを設定する](https://docs.github.com/ja/packages/using-github-packages-with-your-projects-ecosystem/configuring-npm-for-use-with-github-packages)」を参考に、`npm`の設定である`.npmrc`で、パッケージのありかを示す`registry`を設定する。

GitHub Packagesでは、「[パッケージを公開する](https://docs.github.com/ja/packages/using-github-packages-with-your-projects-ecosystem/configuring-npm-for-use-with-github-packages#publishing-a-package)」に書かれているようにGitHubのユーザ名(組織名)をスコープとして扱うので、「[Associating a scope with a registry](https://docs.npmjs.com/misc/scope)」を参考に、`.npmrc`(C:\Users\ユーザ名\\.npmrc)に以下のような設定を追加する。

```:.npmrc
@GitHubのユーザ名:registry https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=リポジトリのPAT
```

この設定をしておくと、スコープに応じてパッケージの登録・取得先を変えてくれるようになる。

# package.json の設定
パッケージの登録先は、`package.json`で設定する。GitHubのリポジトリ1つあたりに、いくつのパッケージを登録するかで書き方が変わってくる。

## 1リポジトリに1パッケージの場合
「[パッケージを公開する](https://docs.github.com/ja/packages/using-github-packages-with-your-projects-ecosystem/configuring-npm-for-use-with-github-packages#publishing-a-package)」を参考に、`name`フィールドのスコープ=GitHubのユーザ名、パッケージ名=リポジトリ名となるように設定する。

```json:package.json
{
  "name": "@GitHubのユーザ名/リポジトリ名",
  ...
}
```

## 1リポジトリに複数パッケージの場合
「[同じリポジトリへの複数うパッケージの公開](https://docs.github.com/ja/packages/using-github-packages-with-your-projects-ecosystem/configuring-npm-for-use-with-github-packages#publishing-multiple-packages-to-the-same-repository)」を参考に、`repoisitory`フィールドを以下のように設定する。

```json:package.json
{
  "name": "@GitHubのユーザ名/パッケージ名",
  "repository": {
    "type": "git",
    "url": "https://github.com/GitHubのユーザ名/リポジトリ名.git",
    "directory": "リポジトリ内でこのpackage.jsonが含まれるディレクトリ※"
  },
  ...
}
```

`npm publish`は`package.json`毎に行うので、一つのリポジトリで複数パッケージのソースを開発する場合、`package.json`が複数存在することになる。そのため、リポジトリのどこに対象パッケージの`package.json`があるかを示すために、※で示した`directory`を用いる。

例えば、リポジトリで3つのパッケージが`packages`ディレクトリ以下に`package1`～`package3`のように存在し、その直下に`package.json`を置いている場合、

* packages
 * package1/package.json
 * package2/package.json
 * package3/package.json

`package1`の`directory`には`packages/package1`を設定する。

```json:package.json
{
  "name": "@GitHubのユーザ名/package1",
  "repository": {
    "type": "git",
    "url": "https://github.com/GitHubのユーザ名/リポジトリ名.git",
    "directory": "packages/package1"
  },
  ...
}
```

> `directory`を間違えても特に問題なかったので、動作に必要な情報ではないかもしれない。

# パッケージをpublishする
「[GitHub Packagesへの認証を行う](https://docs.github.com/ja/packages/using-github-packages-with-your-projects-ecosystem/configuring-npm-for-use-with-github-packages)」を参考に、npmのCLIでログインする。予め`.npmrc`でスコープごとにリポジトリのPATを設定済みであれば、以下のようにログインすることで、`npm`コマンドがGitHubのリポジトリにパッケージを登録できるようになる。

```
npm login
> Username: GitHubのユーザ名
> Password: リポジトリのPAT
> Email: GitHubのメールアドレス
```
ログインできたら、`package.json`があるディレクトリで`npm publish`コマンドを実行することで、`package.json`の設定に従ってパッケージをGitHubのリポジトリへの登録が行われる。

パッケージの登録が成功したら、GitHubのリポジトリ一覧やリポジトリの画面にパッケージが存在することが表示されるようになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296170/c337d520-0fb3-2905-141d-15120f16ca87.png)