m's blog

備忘録とかメモとか

npmパッケージの公開用テンプレートを作ってみました | with TypeScript, Jest, ESLint, Prettier, etc.

npmパッケージの公開用テンプレートを作ってみました | with TypeScript, Jest, ESLint, Prettier, etc.

npm パッケージの公開用テンプレート を作ってみました。

本記事ではテンプレートの内容について、簡単に解説したいと思います。

以下は、2020/07/09 時点でテンプレートに含まれる内容です。

  • TypeScript
  • CI/CD (publish by GitHub Actions)
  • Jest
  • ESLint
  • Prettier
  • EditorConfig
  • husky

※ 上記以外の項目については、テンプレート中の package.json などを参考にしてください。

【目次】

テスト

Jest

以下のコマンドで、テストの実行してください。

# カバレッジなし
yarn test

# カバレッジあり
yarn test:coverage

自動整形

ESLint

以下のコマンドでコードチェックを実行してください。

# 自動修正なし
yarn lint

# 自動修正あり
yarn lint:fix

pre-push でコードチェック(自動修正なし)が実行されるように設定しています。

コードチェックが原因でプッシュに失敗した場合は、yarn lints:fix で修正して、再プッシュしてください。

Prettier

ESLint と連携しています。特に設定する内容はありません。

editorconfig

ESLint、Prettier の設定に合わせて随時調整しています。

ビルド & デプロイ

セットアップ

package.jsonの調整

npm init で生成されるpackage.jsonとテンプレートに含まれるpackage.jsonをマージしてください。

repositorybugsフィールドなど。

デプロイ設定

「Auth Token」がない場合は、npmサイト > Auth Tokens でトークンを生成してください。

GitHubページ > Settings > Secrets で、secret「NPM_TOKEN」を追加して、取得したトークンを設定してください。

GitHub ワークフローの結果を Slack に通知する場合は、Slack で Webhook URL を取得して、GitHubでsecret「SLACK_WEBHOOK_URL」を追加・設定してください。

ビルドチェック

ローカルでビルドチェックをする場合は、以下のコマンドを実行してください。

yarn build

ビルド先はdistディレクトリです。

デプロイ (npm publish)

publish

npm version コマンドでパッケージのバージョンをアップして、自動で追加されるバージョンタグをプッシュしてください。

npm version で追加されるタグをGitHubへプッシュすると、「GitHub Actions」で publish ワークフローが実行されます。

npm version の引数は npm version -h で確認してください。

unpublish

間違えて公開ししまったパッケージなどは、以下のコマンドで削除してください。

npm unpublish [<@scope>/]<pkg>[@<version>]

このコマンドで削除できるのは、72時間以内です。

72時間を超えてから、削除したい場合はサポートへの連絡が必要になります。

まとめ

以上、作成した npm パッケージ公開用テンプレートについて、簡単に解説してみました。

不具合や改善案などがあれば、コメントなどからお知らせください。