[Angular]ライブラリを作成してnpmに公開する

プログラミング

2020.06.06

この記事は約3分で読めます。

Angularの開発をしているとよくお世話になるnpmのライブラリですが、ライブラリを自作する機会があったので、Angularのライブラリの作成方法とnpmに公開する手順を説明していきたいと思います。

前提条件

npmに公開するためにはnpmのアカウントが必要になります。今回はnpmアカウントは取得済みで既にnpmにログイン済みである前提で説明を進めていきます。

npmのアカウント作成方法が分からない場合はこちらを参考にしてもらえればと思います。

Node Package Managerの略称です。Node.jsのパッケージを管理するツールです。

npm install @angular/cli

といった感じでNode.jsのパッケージをインストールすることができます。

Angularライブラリ作成の手順は下記の通りです。

では早速手順の方を説明していきたいと思います!

AngularライブラリはAngularプロジェクトで動作させる必要があるので、まずはAngularプロジェクトを作成します。

ng new angular-libraries

プロジェクト名は環境に応じて書き換えてください。

上記のコマンドを実行すればAngularプロジェクトが作成されます。

先ほど作成したプロジェクトにAngularライブラリを作成します。

cd angular-libraries

ng g library jp-post

それぞれのコマンドのディレクトリ名、ライブラリ名は環境に応じて変更してください。

上記コマンドを実行するとライブラリが作成されます。

あとはAngularプロジェクトとAngularライブラリをそれぞれ実装し、動作確認をおこなっていきます。

作成したAngularプロジェクトとAngularライブラリをビルドします。

ng build --prod

もし、Angularライブラリのみをビルドしたい場合は下記のように実行します。

ng build --prod --project jp-post

開発時には動作確認しながら実装していくと思いますが、ビルド時にwatchオプションをつけておくと変更があるたびにビルドが走るのでオススメです。

ng build --project jp-post --watch

公開前に下記のファイルの体裁を整えます。

下記のコマンドを実行するとnpmへライブラリが登録されます。

cd projects/jp-post
npm publish

npmのサイトを確認してみると

ライブラリが追加されました！！

これでAngularライブラリをnpmへ公開することができたので、今後Angularで開発する際に他のプロジェクトで使用していた共通機能などの横展開がnpm installで行えるので、かなり開発がスムーズに進められるようになると思います。

今回の説明で使用したソースコードやライブラリはGithubとnpmに公開しているので参考にしてもらえればと思います。