プログラミング

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

プログラミング
この記事は約3分で読めます。
スポンサーリンク

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

スポンサーリンク

前提条件

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

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

[npm]npmアカウントの作成〜開発環境でログインするまで
npmにライブラリ公開するためのアカウントの作成と開発環境でのログインまでの手順を説明していきます。動作環境今回...

npmとは

npm | build amazing things

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で行えるので、かなり開発がスムーズに進められるようになると思います。

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

Github

npm

スポンサーリンク
スポンサーリンク
KoEをフォローする
CodeLab

コメント

タイトルとURLをコピーしました