Angular の開発をしているとよくお世話になる npm のライブラリですが、ライブラリを自作する機会があったので、 Angular のライブラリの作成方法と npm に公開する手順を説明していきたいと思います。
前提条件
npm に公開するためには npm のアカウントが必要になります。今回は npm アカウントは取得済みで既に npm にログイン済みである前提で説明を進めていきます。
npm のアカウント作成方法が分からない場合はこちらを参考にしてもらえればと思います。
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 --watchnpm へ公開
公開前に下記のファイルの体裁を整えます。
- projects/jp-post/package.json
- README.md
下記のコマンドを実行すると npm へライブラリが登録されます。
$ cd projects/jp-post
$ npm publishnpm のサイトを確認してみると
ライブラリが追加されました！！
最後に
これで Angular ライブラリを npm へ公開することができたので、今後 Angular で開発する際に他のプロジェクトで使用していた共通機能などの横展開が npm install で行えるので、かなり開発がスムーズに進められるようになると思います。
今回の説明で使用したソースコードやライブラリは Github と npm に公開しているので参考にしてもらえればと思います。
Github
npm
