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
をマージしてください。
repository
やbugs
フィールドなど。
デプロイ設定
「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 パッケージ公開用テンプレートについて、簡単に解説してみました。
不具合や改善案などがあれば、コメントなどからお知らせください。