型定義リポジトリをGitHub Packagesで社内限定公開する(yarnでもnpmでも)

サーバーサイドと、クライアントサイドで共通して利用する型定義リポジトリを作ります。

型定義を社内のリポジトリで共通して使用します。`DefinitelyTyped`的な使い方が理想です。

では作っていきましょう。

なお先人がいらっしゃったので参考にしています。

https://zenn.dev/odiak/articles/950f05a34e9c84

# 手順
初期化
```
npm init
```

TypeScriptとPrettierを追加
```
yarn add -D typescript prettier
```

tsconfig.jsonはこんな感じにしてます(ほぼ参考記事コピペ)
```json
{
  "compilerOptions": {
    "target": "ES2017",
    "module": "CommonJS",
    "declaration": true,
    "strict": true,
    "outDir": "./dist"
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules"]
}

```
`package.json`はこんな感じ。nameは`$@${Organization名}/${package名}`なのがミソです。
また、[`files`は指定してあげましょう](https://qiita.com/masato_makino/items/656f4fbb1595cbcdc23d)

`publishConfig`はローカルからPublishする場合に必要(公開先のリポジトリの指定)です。

```json
{
  "name": "@funee-inc/sample-types",
  "version": "0.0.1",
  "description": "サーバー側、クライアント側で共通利用する型定義ファイル群です。",
  "main": "dist/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prebuild": "rimraf dist",
    "build": "tsc"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/FUNEE-inc/sample-types.git"
  },
  "author": "suyama-daichi",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/FUNEE-inc/sample-types/issues"
  },
  "homepage": "https://github.com/FUNEE-inc/sample-types#readme",
  "devDependencies": {
    "prettier": "^2.7.0",
    "rimraf": "^3.0.2",
    "typescript": "^4.7.3"
  },
  "files": [
    "dist"
  ],
  "types": "./dist/index.d.ts",
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/funee-inc"
  }
}


```

あとはよしなに型をexportするなりしてください。

GitHub　Packagesの設定に移ります。
今回はローカルからではなく、Github Actionsを通したデプロイをします。リリースを切ったら公開されるようにします。
むしろローカルからリリースする場合、PersonalAccessTokenの発行など(最初だけ)が面倒なのでActionsからの方がおすすめです。

公式のテンプレートを元に作っていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256853/a3c418b3-0c26-1e2c-b2b0-518c44293565.png)


```yaml
name: Node.js Package

on:
  release:
    types: [created]

jobs:
  publish-gpr:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          registry-url: https://npm.pkg.github.com/
      - run: npm install
      - run: npm run build
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
```

この状態で、リリースを切ってあげると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256853/d6626ade-35dc-fa57-7e8b-a729febbeeac.png)

こんな感じでPackagesに公開されます。

## 使い方
これを、クライアント側でインストールしていきます。
これには事前に認証などの設定が必要です。

ターミナルで、次のコマンドを実行します。
```
npm login --registry=https://npm.pkg.github.com
```

すると、UsernameとPasswordとメアドが求められるので、
Username - GitHubのユーザー名
Password - https://github.com/settings/tokens で発行したPersonal Access Token

を入力します。
弊社では下記のスコープにしてますが、`read:packages` `repo`だけあれば大丈夫です。ローカルからリリースする場合も見据えて`write`権限も与えてます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256853/1eef850d-8468-eaf6-b2b3-bee15dfe9dd3.png)


### yarnを使っている場合
`.yarnrc`ファイルを以下の内容で作成。

```
registry "https://registry.yarnpkg.com"
"@{org name}:registry" "https://npm.pkg.github.com"
```

インストール
```
yarn add @funee-inc/sample-types
```

### npmを使っている場合
`.npmrc`ファイルを以下の内容で作成。
```
registry=https://npm.pkg.github.com/funee-inc
@{org name}:registry=https://npm.pkg.github.com
```

インストール
```
npm install @funee-inc/sample-types
```

今回弊社の場合、{org name}にはfunee-incが入ります。

`node_modules`にこんな感じでインストールされれば成功です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256853/e1036ba9-ecf0-3da5-81eb-5de06185d6ee.png)

## 型に変更があった時
型定義リポジトリをよしなに修正・変更し、通常通りコミット&プッシュ

GitHub側でリリースを発行してあげれば自動でリリースされます。

このとき、`package.json`のversionをインクリメントするのをお忘れなく。忘れるとこんなエラーが出ます

```
npm ERR! 400 Bad Request - PUT https://npm.pkg.github.com/funee-inc/@funee-inc%2fsample-types - failed to stream package from json: unhandled input: Cannot publish over existing version.
```