(2020.08. 12更新）
実際にこのboilerplateを使ってnpmパッケージを公開してみました。
https://qiita.com/nariakiiwatani/items/aa6189e86c2bd9b4200f
TL; DR
GitHub: dev-npm-package-react-typescript-boilerplate
概要
ReactコンポーネントやHooksを作ってnpmに公開する際、
- ソースコードのgit push
- npmパッケージのpublish
- デモページの更新
という作業が発生する。
（デモページが必要ない場合もあるかもしれないが、個人的な感覚として、デモページがあるかないかで、導入するモチベーションが5倍くらい変わるのでほんとに単純なものだけでもあった方が良いと思う。）
これらの作業は独立にも行えるが、全て同じタイミングで反映されて欲しいので、手元のコマンド一発で全部できるようにしたい。
かつバージョンの不一致が起きないように、全てのリソースを一箇所に置いておきたい。
今回やることは以下の環境づくり。
- ライブラリのソースコードをGitHubリポジトリにおく
- 同じリポジトリにデモページのソースコードを置く
- リポジトリにgit pushすると以下のGitHub Actinosが実行される
- デモページのビルドと公開
- ライブラリのビルドとnpmへのpublish
全部入りのリポジトリはこちら。
GitHub: dev-npm-package-react-typescript-boilerplate
最低限必要な作業は、、、
- (GitHubに登録)
- (npmに登録)
- 自分のGitHubリポジトリの作成
- npm tokenを生成してリポジトリに登録（自動publish用）
- package.jsonの編集
- package名
- 制作者情報
- gitリポジトリ情報
- git push
- GitHub Pagesの公開ディレクトリ設定
以下、Readmeとかぶるところもあるがその他情報を載せておく。
package.jsonの編集
- package名
- 制作者情報
- gitリポジトリ情報
ライブラリ本体の開発
- まず
yarn run setup:allする。 - 開発は基本的に
srcフォルダ内で行う。 - ここに置いたモジュールは、ビルド時に
distフォルダ内にトランスパイルされる。 - モジュールの追加や削除をした際は
index.jsとindex.d.tsも編集しておく。- これを忘れると、import時に各モジュールへのパスをいちいち書くことになる。
- ローカル確認用にビルドする場合は
yarn run build -
git commitは通常通り行って良いが、コミットメッセージに- fix: => パッチバージョンアップ
- feat: => マイナーバージョンアップ
- perf: => メジャーバージョンアップ
のいずれかを含まないと、pushしてもライブラリが公開されない。
コミットメッセージの詳細はsemantic-releaseのドキュメント（英語）を参照。
git-todos と一緒に使うと良さそう.
※ ライブラリ本体から別のパッケージを使用する場合、package.jsonのdependenciesではなくpeerDependenciesとdevDependenciesに追記するようにする。
こうしないと、このライブラリを使用する環境でたまたま同じパッケージを使用しようとした場合に重複することになり、実行時エラーが起きる可能性がある。
参考: Reactコンポーネントをnpmパッケージとして開発する
関連スクリプト
# ライブラリをビルド。distフォルダに出力される
yarn run build
デモページの作成
普通のReactアプリを開発する感じでOK。
demo/src/components/App.tsxの編集から始めると良い。
関連スクリプト
# デモページをビルド。demo/distフォルダに出力される
yarn run build:demo
# ライブラリをビルドして、デモページをホストするローカルサーバを起動
yarn run dev
リモートリポジトリ設定
npm accountページ -> Auth Tokens で新しいトークンを作ってクリップボードにコピー
GitHubリポジトリのSettings -> Secretsで新しい変数を作成する。
- NameはNPM_TOKEN
- Valueはコピーしたトークン
pushしてみる
git push-> GitHub actionsのページから進捗が確認できる
実際にこの仕組みを使って公開しているライブラリがこちらになります。
https://github.com/nariakiiwatani/react-plain-json-editor
https://www.npmjs.com/package/react-plain-json-editor