viteのライブラリモードでprivateなGitHub Packageを作成・公開
はじめに
この記事では、Viteを使用して新たなnode.jsのライブラリを作成し、それをGitHub Packageとして公開する方法について説明します。作成したライブラリは自身のプロジェクト内で利用するだけでなく、他の開発者とも共有することが可能になります。
また、プロジェクト間で共有することによって開発者間のコードの再利用を促進し、全体的な開発効率を向上させることができます。また、ライブラリを公開することで、他の開発者からフィードバックを得ることが可能になり、その結果としてライブラリの品質も向上します。
Viteのセットアップ
まず、Viteの新しいプロジェクトをセットアップします。次のコマンドを使用して新しいViteプロジェクトを作成し、それに移動します。その後、プロジェクトの依存関係をインストールします。
今回はを使用します。以下のコマンドを実行してください。
ここではプロジェクト名を示しています。独自のプロジェクト名を指定してください。
eslintのセットアップ
ESLintを設定するためには、まずESLintパッケージをプロジェクトに追加します。次に、.eslintrcファイルを作成し、そこにプロジェクトで使用するルールを定義します。これにより、コードが一貫したスタイルで書かれていることを保証することができます。
これで のセットアップは完了です。
prettierのセットアップ
次に、prettierの設定を行います。Prettierはコードフォーマッターで、コードの書式を一貫したものにするために使用します。以下のコマンドでprettierをプロジェクトに追加します。そして、.prettierrcファイルを作成し、そこに設定を記述します。
ESLintと連携させる
ESLintとprettierを連携させるためには、まずとをプロジェクトに追加します。これによって、ESLintがPrettierのルールを適用できるようになります。
そして、.eslintrcファイルに以下の設定を追加します。
ファイルの "extends" 配列にを追加します。他の構成をオーバーライドできるように、必ず最後に配置してください。
これでESLintとPrettierの連携が完了しました。
GitHooksの設定
- Add the following to your :
GitHubPackageへ公開するための設定変更
次に、作成したライブラリをGitHub Packageに公開するための設定変更について説明します。これにより、ライブラリを他のプロジェクトで利用したり、他の開発者と共有したりすることが可能になります。
Viteのライブラリモードの設定
まず、Viteのライブラリモードを設定する必要があります。これにより、作成したライブラリはモジュールとして取り扱われ、他のプロジェクトからimportして利用することが可能になります。Viteの設定ファイル（）を以下のように編集します。
この設定では、、、という三つのファイルが生成されます。それぞれUMDフォーマット、ESモジュールフォーマット、TypeScriptの型定義ファイルとなります。
の設定を更新
次に、プロジェクトのにGitHub Packageへの公開に必要な形に更新します
注意点として、をに設定すると、モジュールを利用する側のjestで 'cannot find module'のエラーが表示されます。それを解消するには、に設定します。
の設定
GitHub Packageへの公開に向けたの設定は以下の通りです。
内の設定で変更が必要です。オプションを削除し、その代わりにをに設定します。これは、TypeScriptの型定義ファイルを出力するための設定です。また、もに設定します。これによって、コンパイル結果として型定義ファイルのみを出力します。
最後に、をに設定します。これは、型定義ファイルの出力先ディレクトリを指定する設定です。
以上の設定により、TypeScriptのコンパイル結果として型定義ファイルが生成され、それがGitHub Packageに公開されるようになります。
GitHub Actionsの設定
GitHub Actionsを使用して自動的にライブラリをビルドし、GitHub Packageに公開する設定を行います。ディレクトリにYAMLファイルを作成し、そこにビルドと公開の手順を記述します。これにより、コードの変更がpushされるたびに自動的に新しいバージョンのライブラリが生成され、GitHub Packageに公開されます。
の設定
GitHub Packageに公開するためには、まずnpmの設定ファイルであるを設定する必要があります。これにより、npmがGitHub Packageのレジストリを使用するように設定されます。以下の内容をに追記します。
ここではあなたのGitHubの組織名やユーザ名を示しています。
GitHub Actionsのワークフローファイルを作成する
Github Packageへ公開するためのGitHub Actionsワークフローファイルを作成します。次に示す例は、GitHubで新たなリリースが作成された際に、その更新が自動的にGithub Packageに公開されるように設定されています。
release-please-actionと組み合わせることにより、自動で最新のライブラリを公開することが可能になります。
さいごに
この記事では、Viteを使用して新たなnode.jsのライブラリを作成し、それをGitHub Packageとして公開する手順について詳しく説明しました。これにより、作成したライブラリを他のプロジェクトで利用するだけでなく、他の開発者とも共有することが可能になります。
また、今回公開したライブラリはprivate設定としていますので、利用するためには別途設定が必要となります。その手順については別の記事で詳しく説明する予定です。