LoginSignup
0

More than 1 year has passed since last update.

posted at

updated at

git pushでnpmパッケージとデモページを更新する(React&TypeScript用のboilerplate付き)

(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.jsindex.d.tsも編集しておく。
    • これを忘れると、import時に各モジュールへのパスをいちいち書くことになる。
  • ローカル確認用にビルドする場合はyarn run build
  • git commitは通常通り行って良いが、コミットメッセージに
    • fix: => パッチバージョンアップ
    • feat: => マイナーバージョンアップ
    • perf: => メジャーバージョンアップ
      のいずれかを含まないと、pushしてもライブラリが公開されない。
      コミットメッセージの詳細はsemantic-releaseのドキュメント(英語)を参照。
      git-todos と一緒に使うと良さそう.

※ ライブラリ本体から別のパッケージを使用する場合、package.jsondependenciesではなくpeerDependenciesdevDependenciesに追記するようにする。
こうしないと、このライブラリを使用する環境でたまたま同じパッケージを使用しようとした場合に重複することになり、実行時エラーが起きる可能性がある。

参考: 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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0