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 --watch
npmへ公開
公開前に下記のファイルの体裁を整えます。
- projects/jp-post/package.json
- README.md
下記のコマンドを実行するとnpm
へライブラリが登録されます。
cd projects/jp-post
npm publish
npm
のサイトを確認してみると
ライブラリが追加されました!!
最後に
これでAngular
ライブラリをnpm
へ公開することができたので、今後Angular
で開発する際に他のプロジェクトで使用していた共通機能などの横展開がnpm install
で行えるので、かなり開発がスムーズに進められるようになると思います。
今回の説明で使用したソースコードやライブラリはGithub
とnpm
に公開しているので参考にしてもらえればと思います。
コメント