Angular Logo

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

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 Library 1

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

最後に

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

Github

npm

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です