Visual Studio の ASP.NET Core で LibMan を使用する

Scott Addie 著

Visual Studio には、ASP.NET Core プロジェクトでの LibMan に対する次のようなサポートが組み込まれています。

• ビルド時に LibMan の復元操作を構成して実行するためのサポート。
• LibMan の復元操作とクリーン操作をトリガーするためのメニュー項目。
• ライブラリを検索し、プロジェクトにファイルを追加するための検索ダイアログ。
• LibMan マニフェスト ファイル libman.json の編集サポート。

サンプルコードを表示またはダウンロード(ダウンロード方法)

Prerequisites

• Visual Studio 2019 と ASP.NET と Web 開発ワークロード

ライブラリ ファイルを追加する

ライブラリ ファイルは、次の 2 つの方法で ASP.NET Core プロジェクトに追加できます。

1. [クライアント側ライブラリの追加] ダイアログを使用する
2. LibMan マニフェスト ファイルのエントリを手動で設定する

[クライアント側ライブラリの追加] ダイアログを使用します

クライアント側ライブラリをインストールするには、次の手順に従います。

• ソリューション エクスプローラーで、ファイルを追加するプロジェクト フォルダーを右クリックします。 [追加]>[クライアント側のライブラリ] を選択します。 クライアントサイド ライブラリの追加 ダイアログが表示されます。

  

• [プロバイダー] ドロップ ダウンからライブラリ プロバイダーを選択します。 CDNJS が既定のプロバイダーです。

• [ライブラリ] テキスト ボックスに、フェッチするライブラリ名を入力します。 IntelliSense により、指定したテキストで始まるライブラリの一覧が表示されます。

• IntelliSense のリストからライブラリを選択してください。 ライブラリ名には、@ 記号と、選択したプロバイダーによって認識される最新の安定バージョンがサフィックスとして付けられています。

• 含めるファイルを選択します:

  • すべてのライブラリ ファイルを含めるには、すべてのライブラリ ファイルを含める ラジオ ボタンを選択します。
  • ライブラリのファイルのサブセットを含めるには、特定のファイルを選択するラジオ ボタンを選択します。 ラジオ ボタンを選択すると、ファイル セレクター ツリーが有効になります。 ダウンロードするファイルの名前の左側にあるボックスをオンにします。

• [ターゲットの場所] テキスト ボックスで、ファイルを格納するプロジェクト フォルダーを指定します。 各ライブラリを別々のフォルダーに保存することをお勧めします。

  [ターゲットの場所] として提案されるフォルダーは、ダイアログを起動した場所に基づいています。

  • プロジェクト ルートから起動した場合:
    • wwwroot/lib が使用されるのは、wwwroot が存在する場合です。
    • lib は、wwwroot が存在しない場合に使用されます。
  • プロジェクト フォルダーから起動した場合は、対応するフォルダー名が使用されます。

  提案されるフォルダーには、ライブラリ名がサフィックスとして付けられます。 次の表は、Razor Pages プロジェクトに jQuery をインストールするときに提案されるフォルダーを示しています。

  打ち上げ場所	推奨フォルダー
  プロジェクト ルート (wwwroot が存在する場合)	wwwroot/lib/jquery/
  wwwroot が存在しない場合のプロジェクト ルート	lib/jquery/
  プロジェクトの Pages フォルダー	Pages/jquery/

• [インストール] ボタンをクリックして、libman.json の構成に従ってファイルをダウンロードします。

• インストールの詳細については、[出力] ウィンドウの [ライブラリ マネージャー] フィードを確認してください。 例えば次が挙げられます。

  Restore operation started...
  Restoring libraries for project LibManSample
  Restoring library jquery@3.3.1... (LibManSample)
  wwwroot/lib/jquery/jquery.min.js written to destination (LibManSample)
  wwwroot/lib/jquery/jquery.js written to destination (LibManSample)
  wwwroot/lib/jquery/jquery.min.map written to destination (LibManSample)
  Restore operation completed
  1 libraries restored in 2.32 seconds
  

LibMan マニフェスト ファイル エントリを手動で設定する

Visual Studio のすべての LibMan 操作は、プロジェクト ルートの LibMan マニフェスト (libman.json) のコンテンツに基づいています。 libman.json を手動で編集して、プロジェクトのライブラリ ファイルを構成できます。 libman.json が保存されると、Visual Studio ではすべてのライブラリ ファイルが復元されます。

編集のために libman.json を開くには、次のオプションがあります。

• ソリューション エクスプローラー で libman.json ファイルをダブルクリックします。
• ソリューション エクスプローラーでプロジェクトを右クリックし、 [クライアント側のライブラリを管理する] を選択します。 †
• Visual Studio の [プロジェクト] メニューで、[クライアント側のライブラリを管理する] を選択します。 †

†libman.json ファイルがプロジェクト ルートにまだ存在しない場合は、既定の項目テンプレート コンテンツを使用して作成されます。

Visual Studio には、色付け、書式設定、IntelliSense、スキーマ検証などの豊富な JSON 編集サポートが用意されています。 LibMan マニフェストの JSON スキーマは、https://json.schemastore.org/libman にあります。

次のマニフェスト ファイルを使用すると、LibMan では、libraries プロパティに定義されている構成に従ってファイルが取得されます。 libraries 内で定義されているオブジェクト リテラルの説明を次に示します。

• jQuery バージョン 3.3.1 のサブセットは、CDNJS プロバイダーから取得されます。 このサブセットは、files プロパティ、すなわち、jquery.min.js、jquery.js、および jquery.min.map で定義されます。 これらのファイルは、プロジェクトの wwwroot/lib/jquery フォルダーに格納されます。
• Bootstrap バージョン 4.1.3 の全体が取得され、wwwroot/lib/bootstrap フォルダーに格納されます。 オブジェクト リテラルの provider プロパティによって defaultProvider プロパティ値がオーバーライドされます。 LibMan により、unpkg プロバイダーからブートストラップ ファイルが取得されます。

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "jquery@3.7.1",
      "files": [
        "jquery.min.js",
        "jquery.js",
        "jquery.min.map"
      ],
      "destination": "wwwroot/lib/jquery/"
    },
    {
      "provider": "unpkg",
      "library": "bootstrap@5.3.6",
      "destination": "wwwroot/lib/bootstrap/"
    }
  ]
}

Note

LibMan では、各プロバイダーのライブラリごとに 1 つのバージョンのみがサポートされます。 libman.json ファイルでは、特定のプロバイダーに対して同じライブラリ名を持つ 2 つのライブラリが含まれている場合、スキーマの検証に失敗します。

ライブラリ ファイルを復元する

Visual Studio 内からライブラリ ファイルを復元するには、プロジェクト ルートに有効な libman.json ファイルが存在する必要があります。 復元されたファイルは、プロジェクト内の各ライブラリに指定された場所に配置されます。

ライブラリ ファイルは、ASP.NET Core プロジェクトで次の 2 つの方法で復元できます。

1. ビルド時にファイルを復元する
2. ファイルを手動で復元する

ビルド時にファイルを復元する

LibMan では、ビルド プロセスの一環として、定義済みのライブラリ ファイルを復元できます。 既定では、"ビルド時の復元" 動作は無効になっています。

ビルド時の復元動作を有効にしてテストするには、次の手順に従います。

• ソリューション エクスプローラーで libman.json を右クリックし、コンテキスト メニューで [ビルド時にクライアント側のライブラリの復元を有効にする] を選択します。

• NuGet パッケージのインストールを求めるメッセージが表示されたら、 [はい] ボタンをクリックします。 プロジェクトに Microsoft.Web.LibraryManager.Build NuGet パッケージが追加されています。

  <PackageReference Include="Microsoft.Web.LibraryManager.Build" Version="3.0.71" />
  

• プロジェクトをビルドして、LibMan ファイルの復元が実行されることを確認します。 Microsoft.Web.LibraryManager.Build パッケージにより、プロジェクトのビルド操作中に LibMan を実行する MSBuild ターゲットが挿入されます。

• [出力] ウィンドウの [ビルド] フィードで LibMan アクティビティ ログを確認します。

  1>------ Build started: Project: LibManSample, Configuration: Debug Any CPU ------
  1>
  1>Restore operation started...
  1>Restoring library jquery@3.3.1...
  1>Restoring library bootstrap@4.1.3...
  1>
  1>2 libraries restored in 10.66 seconds
  1>LibManSample -> C:\LibManSample\bin\Debug\netcoreapp2.1\LibManSample.dll
  ========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========
  

ビルド時の復元動作が有効になっている場合は、libman.json コンテキスト メニューに Disable Restore Client-Side Libraries on Build オプションが表示されます。 このオプションを選択すると、プロジェクト ファイルから Microsoft.Web.LibraryManager.Build パッケージ参照が削除されます。 その結果、各ビルド時にクライアント側ライブラリは復元されなくなります。

ビルド時の復元設定に関係なく、libman.json コンテキスト メニューからいつでも手動で復元を行うことができます。 詳細については、「ファイルを手動で復元する」を参照してください。

ファイルを手動で復元する

ライブラリ ファイルを手動で復元するには、次の手順に従います。

• ソリューション内のすべてのプロジェクトについて:
  • ソリューション エクスプローラーでソリューション名を右クリックします。
  • ［クライアント側のライブラリを復元］を選択します。
• 特定のプロジェクトについて:
  • ソリューション エクスプローラー で libman.json ファイルを右クリックします。
  • ［クライアント側のライブラリを復元］を選択します。

復元操作の実行中:

• Visual Studio のステータス バーのタスク ステータス センター (TSC) アイコンがアニメーション化され、 [復元操作が開始されました] と表示されます。 このアイコンをクリックすると、既知のバックグラウンド タスクを示すツールヒントが表示されます。

• ステータス バーと、[出力] ウィンドウの [ライブラリ マネージャー] フィードに、メッセージが送信されます。 例えば次が挙げられます。

  Restore operation started...
  Restoring libraries for project LibManSample
  Restoring library jquery@3.3.1... (LibManSample)
  wwwroot/lib/jquery/jquery.min.js written to destination (LibManSample)
  wwwroot/lib/jquery/jquery.js written to destination (LibManSample)
  wwwroot/lib/jquery/jquery.min.map written to destination (LibManSample)
  Restore operation completed
  1 libraries restored in 2.32 seconds
  

ライブラリ ファイルを削除する

Visual Studio で以前に復元されたライブラリ ファイルを削除するために "クリーン" 操作を実行するには、次の手順に従います。

• ソリューション エクスプローラー で libman.json ファイルを右クリックします。
• [クライアント側のライブラリをクリーンアップする] オプションを選択します。

ライブラリ ファイル以外が誤って削除されないように、クリーン操作ではディレクトリ全体が削除されることはありません。 以前の復元に含まれていたファイルのみが削除されます。

クリーン操作の実行中:

• Visual Studio のステータス バーの TSC アイコンがアニメーション化され、クライアント ライブラリの操作が開始されましたと表示されます。 このアイコンをクリックすると、既知のバックグラウンド タスクを示すヒントが表示されます。
• ステータス バーと、[出力] ウィンドウの [ライブラリ マネージャー] フィードに、メッセージが送信されます。 例えば次が挙げられます。

Clean libraries operation started...
Clean libraries operation completed
2 libraries were successfully deleted in 1.91 secs

クリーン操作では、削除されるのはファイルのみで、プロジェクト自体は削除されません。 ライブラリ ファイルは、今後の復元操作で速やかに取得できるようにキャッシュに残っています。 ローカル コンピューターのキャッシュに格納されているライブラリ ファイルを管理するには、LibMan CLI を使用します。

ライブラリ ファイルのアンインストール

ライブラリ ファイルをアンインストールするには:

• libman.json を開く。

• 対応する libraries オブジェクト リテラル内にカレットを配置します。

• 左余白に表示される電球アイコンをクリックし、[<library_name>@<library_version> のアンインストール] を選択します。

  

または、LibMan マニフェスト (libman.json) を手動で編集して保存することもできます。 ファイルが保存されると、復元操作が実行されます。 libman.json で定義されなくなったライブラリ ファイルは、プロジェクトから削除されます。

ライブラリ バージョンを更新する

更新されたライブラリ バージョンを確認するには:

• libman.json を開く。
• 対応する libraries オブジェクト リテラル内にカレットを配置します。
• 左余白に表示される電球アイコンをクリックします。 更新プログラムの確認 にマウス ポインターを合わせます。

LibMan により、インストールされているバージョンよりも新しいライブラリ バージョンがないか確認されます。 次の結果が生じる可能性があります。

• 最新バージョンが既にインストールされている場合は、 [更新プログラムが見つかりませんでした] メッセージが表示されます。

• まだインストールされていない場合は、最新の安定バージョンが表示されます。

  

• インストールされているバージョンよりも新しいプレリリースを利用可能な場合は、プレリリースが表示されます。

古いライブラリ バージョンにダウングレードするには、libman.json ファイルを手動で編集してください。 ファイルが保存されると、LibMan 復元操作によって次の処理が行われます。

• 以前のバージョンの冗長なファイルが削除されます。
• 新しいバージョンから新しいファイルと更新済みのファイルが追加されます。

関連するコンテンツ

• ASP.NET Core で LibMan CLI を使用する
• LibMan の GitHub リポジトリ