GitHub Packagesを使ってJavaScript libraryを管理する #TypeScript

はじめに

今までGoではgo getを使った共通Packageの管理はしていましたが、JavaScriptではしていませんでした。
しかし、フロント開発で同一デザイナーで同じデザインシステムを採用することとなったシステムを作ることなり、既存システムの資産を効率良く管理できないかと思いGitHub Pakcagesを使うことになったので同様のことを行う方の参考になればと思います。
この記事では、yanrとnpmの両方を使った方法を説明させて頂きます。

GitHub Packagesとは

従来はnpm install などでinstallできるようにJava script libraryの管理にはnpmjs.comにアカウントを作成しnpmjs.comでlibraryを管理していたが、それらが全てGitHubで完結できるようになった。
なので、npmjs.comのアカウント作成とは不要になり、かつ従来通りnpm install or yarn installを使ってlibraryをinstallできるようになった。（Library使用側の使い勝手には変更なし）

Public packageは無料でPrivate packageは無料枠があるが場合によっては料金がかかるのでこちらを確認してください。

前提

GitHubにrepostioryが作成済み
ディレクトリー構成としては以下の構成を想定しています。

.
├── package.json
└── packages
    ├── sample-a
    │   ├── package.json
    │   └── src
    │       └── index.js
    └── sample-b
        ├── package.json
        └── src
            └── index.js

pakcagesディレクトリーの下に各種モジュールを配置しているデファクトスタンダートな構成です。

下準備をしていく

ルートディレクトリーにpackage.jsonを作成する

workspace機能を使ってpakcagesディレクトリー配下のpackageを管理していくのでルートディレクトリーにpackage.jsonを作成します。

npm init
// or
yarn init

必須ではないですが、念のため"private": trueを作成されたpackage.jsonに追記しときます。

pakcagesディレクトリー配下にpakcageを作っていく

ディレクトリーを作ってから、そのディレクトリーでyarn initしてもよいですが、面倒なのでルートディレクトリーでnpm init -w packages/DIR_NAMEでまとめて作ってしまいます。

npm init -w packages/sample-a
npm init -w packages/sample-b

作成された各packageに以下のようなsample moduleを追加します

// packages/sample-a/src/index.js
function sayHello(){
    console.log("Hello World Sample A Package");
}

sayHello()

// packages/sample-b/src/index.js
function sayHello(){
    console.log("Hello World Sample B Package");
}

sayHello()

最後に各Packageのpackage.jsonを修正して準備は完了です。

  "name": "@[GITHUB_USER_NAME or ORG_NAME]/sample-b",
  "version": "1.0.0",
  "description": "sample b package",
  "main": "src/index.js", ← 追記
  "files": [ ←追記
    "src/*"
  ],
  "repository": { ←追記
    "type": "git",
    "url": "https://github.com/<GITHUB_USER_NAME>/<REPOSITORY_NAME>.git",
    "directory": "packages/sample-b"
  },
  "publishConfig": { ←追記
    "registry": "https://npm.pkg.github.com/"
  }

mainはpackageのエントリーポイントとなるファイル名を指定してください
filesはPackageに含めて配信したいファイルやディレクトリーを指定してくだい（webpackなどでバンドルしたファイルのみを配信したい場合はdist/*みたいな指定をします）
repositoryは、モノリポ構成の場合のみ指定が必須になります。
publishConfigはnpmjs.comに向かってPublishしないように設定しといた方が無難です。

GitHub PakcageにPublishする

.npmrcを作成し各packageのpackage.jsonと同階層に置く

.npmrc

//npm.pkg.github.com/:_authToken=<PERSONA_ACCESS_TOKEN>
@<USER_NAME>:registry=https://npm.pkg.github.com/

※ Personal access tokenの作成方法はこちらをご確認ください。

各PackageディレクトリーでPusblishコマンドを実行して公開していく
yarnとnpmコマンドのどちらでもPublishできますが、workspacesを設定している場合にコマンドが変わってきますので両方とも記載しておきます。

// npm
$npm publish --no-workspaces

npm notice 
npm notice 📦  @hog-hog/sample-a@1.0.0
npm notice === Tarball Contents === 
npm notice 307B package.json
npm notice 83B  src/index.js
npm notice === Tarball Details === 
npm notice name:          @yoyo-kikuchi/sample-a                  
npm notice version:       1.0.0                                   
npm notice filename:      @yoyo-kikuchi/sample-a-1.0.0.tgz        
npm notice package size:  353 B                                   
npm notice unpacked size: 390 B                                   
npm notice shasum:        59cdda53231a2447d9f416411c7899f8e8efdc67
npm notice integrity:     sha512-3EL68Kg7q6gs/[...]RHdo/s12gtX1g==
npm notice total files:   2                                       
npm notice 
npm notice Publishing to https://npm.pkg.github.com/
+ @hog-hog/sample-a@1.0.0

// yarn
$ yarn publish

[1/4] Bumping version...
info Current version: 1.0.0
question New version: 1.0.0
[2/4] Logging in...
[3/4] Publishing...
success Published.
[4/4] Revoking token...
info Not revoking login token, specified via config file.
Done in 7.03s.

成功後すぐにgithubのrepostioryを確認しても反映されていないので、５分ほど待ってから確認すると以下のようになっていると思います。

あとは、使いたい側のRepostioryにも.npmrcを作成し yarn add @xxxx/module-aや npm install --save @xxxx/module-bを実行すればinstallできます。

関係コマンド

publishする際にversionの重複があるとエラーになるので、手動で変更してもよいですが一応コマンドを記載しときます。

// セマンティックバージョニングのmajorをup
npm version major
// セマンティックバージョニングのminorをup
npm version minor
// セマンティックバージョニングのpatchをup
npm version patch

npm publish

yarn

// セマンティックバージョニングのmajorをup
yarn publish --major
// セマンティックバージョニングのminorをup
yarn publish --minor
// セマンティックバージョニングのpatchをup
yarn publish --patch

yarnの方がpublishコマンドにオプションをつければ一発で終わるので楽ですね。

今回のSampleはGitHubで公開しております。

参考記事

GitHub Packagesで複数パッケージを1リポジトリに登録する
 npm publishする時の注意点
 npm workspace の使い方