【npm】【yarn】外部ライブラリを改造して追加する

 あるライブラリを使っていて要件を満たすには機能が足りないと気づいた時(要件が変化することはよくあるので割と起きます)、取る方策は自分の場合、三種類に分類されます。自分で書くか、別のライブラリを使うか、そのライブラリに機能を足すか、の三つです。”自分で書く”は何でも解決できる手段ですが時間がかかりがちです。”別のライブラリを使う”は解決ができない時があります(Electron + TypeScript + Vue.jsの様な複数フレームワークの環境で使えなかったり、そもそもニッチすぎる機能だったり)。この記事では最後の”そのライブラリに機能を足す”をする方法の一つであるgitリポジトリ上のライブラリを直に参照して管理する方法を紹介します。
 まず機能に満足できないライブラリを改造します。ライブラリはおおよそGitHubにソースコードが公開されている(少なくとも自分の扱ったことのある範囲では全部)ので fork します。fork は画像の赤丸からできます。

 fork したら fork によって自分のものになったリポジトリで新たにブランチ(”add-機能名”とかおススメです)を生やし、必要なコードを追記します。必要なコードを追記したらプッシュして改造自体は完了です。余談ですが施した改造が他の誰かの役に立ちそうなら元となったリポジトリにプルリクエストを出すと良いです。破壊的なコードであったりテストのない投げっぱなしコードでなければ受け入れてもらいやすいです。プルリクエストがマージされたならば後述の自分のGitHubリポジトリを追う方法は必要なくなります。

 改造が完了したら更にブランチ(“publish-機能名”とかおススメです)を切ります。これはnpmで公開された状態を再現するブランチです。普段 npm や yarn を用いてライブラリをインストールした場合、自動でビルドまでしてくれるのですが Git リポジトリを直に参照した場合、そのような親切はありません(少なくとも自分の環境ではだめでした)。あらかじめビルド済みのコードをGit上で公開状態にしたブランチを作りそこを参照する必要があります。このビルド済みコードをコミット、プッシュする時にはいくつか障害があります。
 まず、npmとGitHubで公開されているファイルの違いがあります。Git管理に追加する必要のあるディレクトリが存在することがとても多いです。.gitignore と .npmignore(あったならば)と既存の公開されているライブラリのファイル構成を見て、npmで公開されているファイル構成を再現してステージングします。大体 dist ディレクトリを公開すればそれで何とかなります。
 次いでGitフックを黙らせます。多くのプロジェクトにはLintとテストの自動フックが入っており、これを有効化したままではエラーが出力されてプッシュできないことが多いです。package.json中のpreCommitと.git/hooksディレクトリ中のスクリプトファイルを削除すると黙ってくれます。
 プッシュが完了したならば、元々の外部ライブラリを使いたかったプロジェクトにGitで公開した改造ライブラリを読み込ませます。これは次のコマンドで行えます。詳しくは公式のgit-urls-as-dependenciesを読むとよいです。

npm install {gitユーザ名}/{リポジトリ名}.git#{ブランチ名}
yarn add {gitユーザ名}/{リポジトリ名}.git#{ブランチ名}
yarn add hoge/bootstrap.git#publish-custom-ver

npm-package.json | npm Documentation#git-urls-as-dependencies

 本筋と関係ないので末尾に持ってきましたが改造したコードを公開するに際してライセンスは一通り目を通しておく必要があります。よくあるMIT、BSD、GPLなどはライセンスをそのまま継承してGitHub上で公開するのには問題ないのですが、ライセンスなしでふんわり公開されているモノや独自ライセンスとなると元々の開発者が寛容であることに期待するしかありません。触らぬ神に祟りなしです。ライブラリのコードが既にGitで公開されているものであればいずれも問題なさそうですが、曖昧な部分は残っており、再公開に関して一家言あるような人もいます。業務等の金銭が絡む様なものでは慎重すぎるくらいでちょうどいいです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG