Angularの開発をしているとよくお世話になるnpmのライブラリですが、ライブラリを自作する機会があったので、Angularのライブラリの作成方法とnpmに公開する手順を説明していきたいと思います。
前提条件
npmに公開するためにはnpmのアカウントが必要になります。今回はnpmアカウントは取得済みで既にnpmにログイン済みである前提で説明を進めていきます。
npmのアカウント作成方法が分からない場合はこちらを参考にしてもらえればと思います。
http://43.206.46.12/npm-new-account-local-login/
npmとは
Node Package Managerの略称です。Node.jsのパッケージを管理するツールです。
npm install @angular/cli
といった感じでNode.jsのパッケージをインストールすることができます。
今回の作業について
Angularライブラリ作成の手順は下記の通りです。
- Angularプロジェクトの作成
- Angularライブラリの作成
- 動作確認
- npmへ公開
では早速手順の方を説明していきたいと思います!
Angularプロジェクトの作成
AngularライブラリはAngularプロジェクトで動作させる必要があるので、まずはAngularプロジェクトを作成します。
ng new angular-libraries
プロジェクト名は環境に応じて書き換えてください。
上記のコマンドを実行すればAngularプロジェクトが作成されます。
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へ公開
公開前に下記のファイルの体裁を整えます。
- projects/jp-post/package.json
- README.md
下記のコマンドを実行するとnpmへライブラリが登録されます。
cd projects/jp-post
npm publish
npmのサイトを確認してみると
ライブラリが追加されました！！
最後に
これでAngularライブラリをnpmへ公開することができたので、今後Angularで開発する際に他のプロジェクトで使用していた共通機能などの横展開がnpm installで行えるので、かなり開発がスムーズに進められるようになると思います。
今回の説明で使用したソースコードやライブラリはGithubとnpmに公開しているので参考にしてもらえればと思います。
