ASP.NET Core のクライアントライブラリ管理「LibMan」を使用する

現在表示しているページは選択中の表示言語には対応しておりません。 ×

環境

Visual Studio

• Visual Studio 2019

ASP.NET Core

• 3.1

クライアントのライブラリ管理

ASP.NET Core のプロジェクトを新規で作成すると、「wwwroot/lib」フォルダの中に「bootstrap」や「jquery」などのクライアント用ライブラリが含まれています。 クライアントライブラリを使用することがないのであればそのままでも問題ないのですが、 一般的には新規でライブラリを追加したり、jquery などの既存のライブラリをバージョンアップすることが多いです。

CDN などインターネット上の別サーバーにあるライブラリを使用する場合は別に意識する必要はないのですが、 ライブラリを自サーバーに置いて使用したい場合は、手動でライブラリをダウンロードし、この lib フォルダに配置する必要があります。

しかし、ライブラリが増えてきたり時間が経ったりすると「現在のバージョンはどれなのか」「必要なファイルがきちんとあるか」「新しいバージョンをまた探して取ってこないといけない」など管理が面倒になってきてしまいます。

そこで ASP.NET Core では「LibMan」というライブラリ管理機能でこれらのクライアントのライブラリを一括で管理することができます。

LibMan の導入

ソリューション エクスプローラーからプロジェクトを右クリックして クライアント側のライブラリを管理する を選択します。

すると libman.json というファイルが追加されます。

ファイルの中身は図のようになっています。 直接編集することもできますが、画面操作で勝手に編集されるので直接入力することはあまりありません。とりあえず導入はこれだけです。

クライアントライブラリの追加

プロジェクトを右クリックして「追加 → クライアント側のライブラリ」を選択します。

プロバイダー を選択して ライブラリ に導入したいライブラリ名を入力します。部分一致で検索できるのでキーとなる名前だけ入力して構いません。

例えば jquery と入力すると以下のように候補が表示されます。

この時 Enter キーを押すか、候補を選択するようにしてください。そうすると最新バージョンが自動で選択されます。

ちなみに候補がない場合は選択しているプロバイダーでは管理されていない可能性があるので、他のプロバイダーを選択してみてください。

ターゲット ロケーションは初期設定である「wwwroot/lib/」を基準にした方が管理しやすいのでそのままでいいです。

ライブラリを入力したら インストール ボタンをクリックします。

以下のようなダイアログが表示される場合はプロバイダーに存在していないかバージョンなどを指定していない可能性があります。

すると libman.json の中身が以下のように追記されます。

libman.json にライブラリが登録されると、自動的にライブラリが wwwroot/lib にダウンロードされます (少し時間がかかる場合があります)。 しかし、jquery については最初から lib フォルダにあるので最新にならない場合があります (なる場合もあります)。 この場合は既存の jquery を削除してから以下のように libman を更新します (最新になってる場合は何もしなくてよいです)。

libman で管理するなら既存のライブラリはすべて削除しても構いません。

libman.json を右クリックして クライアント側のライブラリを復元する を選択します。

ライブラリが自動的にダウンロードされます。

試しに新規ライブラリ「toastr.js」を導入してみます。

手動でダウンロードすることなく導入されました。

ライブラリの使い方

普通に link タグや script タグを使って該当するパスを指定するだけです。

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/toastr.js/toastr.css" />

<!-- 省略 -->

<script src="~/lib/popper.js/umd/popper.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/lib/toastr.js/toastr.min.js"></script>

ライブラリのバージョン変更・更新

libman.json を開きます。

対象のライブラリのバージョンを消していくと候補が表示されるので、対象のバージョンを選択するだけです。変更したらファイルを保存します。

一応ライブラリは自動更新されますが、更新されない場合は libman.json を右クリックして クライアント側のライブラリを復元する を選択します。