ys memos

Blog

npmのTypeScript用パッケージのGitHubテンプレート作った!


npm

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に自分のライブラリを実装する.


準備したテンプレートには,便利な Github Workflow が準備されている.これにより,GitHub の Web 画面上からパッケージの publish を行うことができる.

まずは,Create a new releaseをクリックし,Choose a tagからタグを選択する.タグは,このタイミングでCreate new tagから作成できる.

次に,Release titleにリリースタイトルを入力し,必要に応じてDescribe this releaseにリリース情報を記載する.

最後に,Publish releaseをクリックする.

その後,Actionsを確認すると,ワークフローが動き出し,環境変数のトークンを認証情報としてパッケージを publish してくれる.


これはいいですね!


関連タグを探す