GitHub Packagesを使って自作ライブラリを管理しよう

GitHub Packagesとは

GitHub Packagesに自作関数をデプロイする

Package.jsonの設定

awesome-library/package.json
{
 "name": "@{GitHubのユーザーネーム}/{リポジトリ名}",
 "version": "0.0.1",
 "description": "GitHub Package sample",
 "main": "dist/main.js",
 "types": "dist/main.d.ts",
 "publishConfig": {
   "access": "restricted",
   "registry": "https://npm.pkg.github.com/"
 },
 "repository": {
   "type": "git",
   "url": "git://github.com/{GitHubのユーザーネーム}/{リポジトリ名}.git"
 },
 "author": "{所有者の情報}",
 "license": "UNLICENSED",
 "devDependencies": {
   "typescript": "^4.2.3"
 }
}

tsconfig.jsonの設定

awesome-library/tsconfig.json
{
 "compilerOptions": {
   "target": "es5",
   "module": "umd",
   "declaration": true,
   "sourceMap": false,
   "outDir": "./dist/",
   "strict": true,
   "moduleResolution": "node",
 },
 "exclude": [
   "node_modules",
   "dist"
 ],
 "include": [
   "src"
 ]
}

.gitignoreにdistを追加

関数を作成する

awesome-library/src/main.ts
export function getPartialText(text: string): string {
 return text.split('').filter((_character, index) => index % 2 === 0).join('')
}

GitHub ActionsでPublishの設定を行い、Packageとして公開する

awesome-library/.github/workflows/deploy.yml
name: publish my library

env:
 CI: true

on:
 push:
   branches:
     - main
   tags:
     - "!*"

jobs:
 publish:
   name: Setup
   runs-on: ubuntu-latest
   steps:
     - name: checkout
       uses: actions/checkout@v2
    
     # Nodeのバージョンを指定
     - name: setup node
       uses: actions/setup-node@v1
       with:
         node-version: 14.x
         registry-url: https://npm.pkg.github.com

     # 必要なモジュール（typescript）をインストール
     - name: install node_modules
       run: npm install

     # トランスパイルを実行
     - name: build
       run: npx tsc

     # パッケージとして公開する
     - name: publish
       run: npx can-npm-publish --verbose && npm publish || echo "No need to publish"
       env:
         NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        
     # バージョン情報を環境変数として設定
     - name: set version to env
       run: node -p -e '`VERSION=${require("./package.json").version}`' >> $GITHUB_ENV

     # バージョン情報持つタグを付与する
     - name: add version tag
       uses: pkgdeps/git-tag-action@v2
       with:
         version: ${{ env.VERSION }}
         github_token: ${{ secrets.GITHUB_TOKEN }}
         github_repo: ${{ github.repository }}
         git_commit_sha: ${{ github.sha }}
         git_tag_prefix: "v"

デプロイされたライブラリを使う

Personal Access Tokenを発行する

パッケージのインストール

nice-project/.npmrc
@{GitHubのユーザーネーム}:registry="https://npm.pkg.github.com"
//npm.pkg.github.com/:_authToken={発行したPersonal Access Token}

$ npm i @{GitHubのユーザーネーム}/awesome-library

プロジェクトで使用する

nice-project/src/index.ts
import { getPartialText } from '@{GitHubのユーザーネーム}/awesome-library'
console.log(getPartialText('ABABABA'))

$ npx tsc src/index.ts // ←dist/index.jsにトランスパイルします
$ node dist/index.js
AAAA

パッケージのアップデート

awesome-library/src/main.ts
export function getPartialText(text: string, target: 'odd' | 'even'): string {
 if(target === 'odd') {
   return text.split('').filter((_character, index) => index % 2 === 0).join('')
 } else {
   return text.split('').filter((_character, index) => index % 2 !== 0).join('')
 }
}

$ npm version minor
$ 0.1.0
$ git log --max-count 2 --oneline
10b8d80 (HEAD -> main, tag: v0.1.0) 0.1.0
b466945 feat: 奇数番目か偶数番目かを選べる機能を実装

まとめ