ブラウザ拡張開発日記

作ってるもの→ https://chrome.google.com/webstore/search/cside?_category=extensions

複数の PJ で使う TypeScript のコードを共通ライブラリ化する

ライブラリを作るにあたり:tsup を使った

tsup

tsup とは:rollup みたいなバンドルツール。TypeScript で npm パッケージを作るのに特化している。

これを使わないと何が面倒臭いか:

  • CommonJS / ES Module 両対応させる場合、それぞれ別々の tsconfig.json を用意しなければならない
    • tsup だと、非常にシンプルな config ファイル 1 個だけで CommonJS / ES Module 両対応できる
  • スクリプト ( node_module/.bin/ に設置されるやつ) を作る場合、ES Module だと、 import './foo.js' みたいに import 文に .js を書かないと実行時エラーになってしまう
    • tsup を使っていると .js を書かなくても実行時エラーにならない
  • スクリプトを作る場合、ビルドした後に chmod +x しなければならない
    • tsup を使っていれば(ry

ライブラリをどこに上げるか→ Github Packages にした

GitHub Packagesのクイックスタート - GitHub Docs

Github Packages とは:パッケージをホストおよび管理する Github の機能。npm 互換がある。

ここに Github Actions を使ってパッケージをアップロードすれば、あとは npm パッケージをインストールするのと同じように、 npm install <package name> でそのパッケージを使えるようになる。

他に検討したがボツにしたもの:

  • 普通の素の Github リポジトリをホスト先として使う
    • 要は npm install https://github.com/Cside/some-package みたいなことをすること
    • 👍 npm publish とかすることなく、Push するだけで更新が反映されるのは楽
    • ❌ ビルドした .js ファイルも Git 管理しないといけない( Pull Request の差分とかが地獄になる)
  • npm の公開パッケージ
    • ❌ 非常に個人的なコードなので、公開パッケージとしてアップロードするのは躊躇われる
  • npm のプライベートパッケージ
    • ❌ 月額料金がかかる
  • Git submodule
    • 👍 .npmrc を書くことなくインストールできる
    • ❌ clone したあと、TypeScript を JS にビルドするタスクを何らかの方法で実行しなければならない
    • リポジトリを丸ごと clone するわけなので、Github Packages や npm のプライベートパッケージでインストールする場合と比べて、ファイルサイズが肥大化する
    • ❌ node_moduleじゃない場所に依存が入るのがキモい

Github Packages にもデメリットは 1 つあり、それは GithubAccess Token を含んだ .npmrc を、リポジトリを触る全員が設置しないといけないこと。

これはメンテナにとってはだるそうなので、ここだけ気になるんだよなー。。(どうしようもならなそうだけど)