Visual Studio で npm パッケージを管理する

npm を利用すると、Node.js と ASP.NET Core の両方のアプリケーションで使用するパッケージをインストールしたり、管理したりできます。 Visual Studio では、npm を操作したり、UI から、または直接 npm コマンドを実行したりすることが簡単にできます。 npm に不慣れで詳細が必要な場合、npm ドキュメント ページにお進みください。

Visual Studio と npm の統合は、プロジェクトの種類によって異なります。

• CLI ベースのプロジェクト (.esproj)
• ASP.NET Core
• フォルダーを開く (Node.js)

重要

npm では、プロジェクト ルートに node_modules フォルダーと package.json が必要です。 お使いのアプリのフォルダー構造が異なる場合、Visual Studio を使用して npm パッケージを管理するには、フォルダー構造を変更する必要があります。

CLI ベースのプロジェクト (.esproj)

Visual Studio 2022 以降では、npm パッケージ マネージャーを CLI ベースのプロジェクト用に使用できるため、ASP.NET Core プロジェクトの NuGet パッケージをダウンロードするのと同じように npm モジュールをダウンロードできるようになりました。 その後、package.json を使用してパッケージを変更および削除できます。

パッケージ マネージャーを開くには、ソリューション エクスプローラーから、プロジェクトの npm ノードを右クリックします。

次に、npm パッケージを検索し、1 つを選択し、[パッケージのインストール] を選択してインストールできます。

ASP.NET Core プロジェクト

ASP.NET Core プロジェクトなどのプロジェクトの場合は、プロジェクトで npm サポートを追加し、npm を使用してパッケージをインストールすることができます。

Note

ASP.NET Core プロジェクトでは、npm の代わりにライブラリ マネージャーまたは yarn を使用して、クライアント側の JavaScript ファイルと CSS ファイルをインストールすることもできます。 npm によって提供されない MSBuild または dotnet CLI との統合がパッケージ管理に必要な場合は、これらのオプションのいずれかが必要になることがあります。

プロジェクトに package.json ファイルがまだ含まれていない場合は、package.json ファイルをプロジェクトに追加することで、npm サポートを有効にすることができます。

1. package.json ファイルを追加するには、ソリューション エクスプローラーでプロジェクトを右クリックし、[追加]>[新しい項目] を選択します (または Ctrl + SHIFT + A キーを押します)。 検索ボックスを使用して npm ファイルを検索し、[npm 構成ファイル] を選択し、既定の名前を使用して、[追加] をクリックします。

2. package.json の dependencies または devDependencies セクションに 1 つまたは複数の npm パッケージを含めます。 たとえば、ファイルに次の内容を追加できます。

   "devDependencies": {
      "gulp": "4.0.2",
      "@types/jquery": "3.5.29"
   }
   

   ファイルを保存すると、Visual Studio によってソリューション エクスプローラーの [依存関係] / [npm] ノードの下にパッケージが追加されます。 ノードが表示されない場合は、[package.json] を右クリックし、[パッケージの復元] を選択します。 パッケージのインストール状態を表示するには、[出力] ウィンドウで npm 出力を選択します。

   package.json を使用して npm パッケージを構成できます。 package.json を直接開くか、ソリューション エクスプローラーで npm ノードを右クリックし、[Open package.json]\(package.json を開く\) を選択します。

npm パッケージのトラブルシューティング

• アプリのビルド時または TypeScript コードのトランスパイル時にエラーが表示される場合は、エラーの原因として npm パッケージの非互換性が考えられるので確認してください。 エラー特定するには、この記事で前述したように、パッケージをインストールするときに npm 出力ウィンドウを確認してください。 たとえば、1 つ以上の npm パッケージ バージョンが非推奨となっており、これが原因でエラーが発生する場合、エラーを修正するにはより新しいバージョンのインストールが必要になることがあります。 package.json を使用した npm パッケージのバージョン管理に関する詳細は、「package.json configuration」 (package.json の構成) を参照してください。

• ASP.NET Core シナリオによっては、こちらに説明されている既知の問題が原因で、インストールされている npm パッケージの正しい状態がソリューション エクスプローラーに表示されないことがあります。 たとえば、パッケージのインストール時に、それがインストールされていないと表示される可能性があります。 ほとんどの場合、この記事で先に説明したように、package.json を削除し、Visual Studio を再起動して、package.json ファイルを再度追加することで、ソリューション エクスプローラーを更新できます。 または、パッケージをインストールするとき、npm 出力ウィンドウを使用してインストールの状態を確認できます。

• 一部の ASP.NET Core シナリオでは、ソリューション エクスプローラー内の npm ノードが、プロジェクトのビルド後に表示されないことがあります。 ノードを再び表示するには、プロジェクト ノードを右クリックし、[プロジェクトのアンロード] を選択します。次に、プロジェクト ノードを右クリックし、[プロジェクトの再読み込み] を選択します。