2022/05/27
はじめに
最近,ふとした拍子に npm パッケージを公開している.実際の設定については以前紹介した.
その際,パッケージのpackage.json
設定やライセンスの配置(自分の npm パッケージは MIT が基本),npm への publish のための GithubWorkflow 設定,rollup
によるソースコードのビルドなど,基本的には同一のファイルを頑張ってコピペする作業が発生していた.
これは,非常に面倒で無駄な時間となることが多く,いざ開発しようと思ったときのやる気をそがれる一因となる.
そのため,Github のテンプレートリポジトリに npm パッケージの基礎部分を配置することで,今後の大変な作業を削減した.
使い方
リポジトリ作成
こちらにアクセスし,Use this template
をクリックし,そこからリポジトリを作成する.
ここで,ふだん私は,開発段階ではprivate
で,初回の publish 以降はリポジトリはpublic
に変更している.これはそれぞれ,未完成のリポジトリを公開しておく意義が薄い点,パッケージのリポジトリが公開されていると嬉しい点から,そのようにしている.
パッケージ情報設定
rollup.config.js
の中にあるLibraryName
という文字を自分のライブラリの名前に変更する.
次に,package.json
の編集を行う.開いてもらうとすぐに変更箇所が分かるかと思われるが念のため明示しておくと,name
/ description
/ repository.url
/ keywords
/ author
/ license
/ bugs.url
/ homepage
の項目を好みに修正する.
トークンを環境変数に設定
直接Workflowに挿入しない要注意!!
トークンが流出した場合,アカウント内のパッケージが第三者によって勝手に変更される恐れがあります.
万が一流出した場合は,トークンを再生成してください.
npm にサインインし,右上にある自身のアイコンをクリック,そこからAccess Tokens
をクリックし,トークンを生成する.このとき,Automation
を選択する.
npm ページをリロードする前に生成されたアクセストークンをコピーし,GitHub のリポジトリに移動する.
リポジトリ名の下にあるSettings
> Secrets
> Actions
へ進み,New repository secret
をクリック.
そこで,Name
にはNPM_TOKEN
という値を入れ,Value
には上でコピーしたトークンを入れる.
ライブラリ開発!
index.ts
に自分のライブラリを実装する.
publish
準備したテンプレートには,便利な Github Workflow が準備されている.これにより,GitHub の Web 画面上からパッケージの publish を行うことができる.
まずは,Create a new release
をクリックし,Choose a tag
からタグを選択する.タグは,このタイミングでCreate new tag
から作成できる.
次に,Release title
にリリースタイトルを入力し,必要に応じてDescribe this release
にリリース情報を記載する.
最後に,Publish release
をクリックする.
その後,Actions
を確認すると,ワークフローが動き出し,環境変数のトークンを認証情報としてパッケージを publish してくれる.
おわりに
これはいいですね!