npm を使用すると、Node.js アプリケーションと ASP.NET Core アプリケーションの両方で使用するパッケージをインストールおよび管理できます。 Visual Studio を使用すると、NPM を操作したり、UI を介して npm コマンドを発行したり、直接 npm コマンドを発行したりすることが簡単になります。 npm に慣れていない場合は、 npm のドキュメントを参照してください。
Visual Studio と npm の統合は、プロジェクトの種類によって異なります。
Von Bedeutung
npm では、プロジェクト ルートに node_modules フォルダーと package.json が必要です。 アプリのフォルダー構造が異なる場合は、Visual Studio を使用して npm パッケージを管理する場合は、フォルダー構造を変更する必要があります。
CLI ベースのプロジェクト (.esproj)
Visual Studio 2022 以降では、npm パッケージ マネージャーは CLI ベースのプロジェクトで使用できるため、ASP.NET Core プロジェクト用の NuGet パッケージをダウンロードする方法と同様に npm モジュールをダウンロードできるようになりました。 その後、 package.json を使用してパッケージを変更および削除できます。
パッケージ マネージャーを開くには、ソリューション エクスプローラーでプロジェクトの npm ノードを右クリックし、[ npm パッケージの追加] を選択します。
次に、npm パッケージを検索し、パッケージを選択して、[パッケージのインストール] を選択して インストールします。
Node.js プロジェクト
Node.js プロジェクト (.njsproj) の場合は、次のタスクを実行できます。
- ソリューション エクスプローラーからパッケージをインストールする
- ソリューション エクスプローラーからインストールされているパッケージを管理する
-
Node.js 対話型ウィンドウで
.npmコマンドを使用する
これらの機能は連携し、プロジェクト システムとプロジェクト内の package.json ファイルと同期します。
[前提条件]
プロジェクトに npm サポートを追加するには、 Node.js 開発 ワークロードと Node.js ランタイムがインストールされている必要があります。 詳細な手順については、「 Node.js と Express アプリを作成する」を参照してください。
注
既存の Node.js プロジェクトの場合は、 From existing Node.js code ソリューション テンプレートまたは Open フォルダー (Node.js) プロジェクトの種類を使用して、プロジェクトで npm を有効にします。
ソリューション エクスプローラーからパッケージをインストールする (Node.js)
Node.js プロジェクトの場合、npm パッケージをインストールする最も簡単な方法は、npm パッケージのインストール ウィンドウを使用することです。 このウィンドウにアクセスするには、プロジェクトの npm ノードを右クリックし、[ 新しい npm パッケージのインストール] を選択します。
このウィンドウでは、パッケージの検索、オプションの指定、インストールを行うことができます。
![[新しい npm パッケージのインストール] ダイアログのスクリーンショット。](media/search-package.png?view=vs-2022)
- 依存関係の種類 - Standard、 Development、 および Optional パッケージの間で選択します。 Standard では、パッケージがランタイム依存関係であることを指定しますが、開発では、パッケージが開発時にのみ必要であることを指定します。
- package.jsonに追加 - 推奨。 この構成可能なオプションは非推奨です。
- [選択したバージョン ] - インストールするパッケージのバージョンを選択します。
-
その他の npm 引数 - 他の標準 npm 引数を指定します。 たとえば、
@~0.8などのバージョン値を入力して、バージョン一覧で使用できない特定のバージョンをインストールできます。
npm 出力のインストールの進行状況を [出力] ウィンドウで確認できます (ウィンドウを開くには、[表示]>、[出力] の順に選択するか、Ctrl キー + Alt + O キーを押します)。 これには時間がかかる場合があります。
ヒント
スコープ付きパッケージを検索するには、検索クエリの前に関心のあるスコープを指定します。たとえば、「 @types/mocha 」と入力して、mocha 用の TypeScript 定義ファイルを検索します。 また、TypeScript の型定義をインストールする場合は、npm 引数フィールドにバージョン ( @ts2.6 など) を指定することで、対象とする TypeScript のバージョンを指定できます。
ソリューション エクスプローラーでインストールされているパッケージを管理する (Node.js)
npm パッケージがソリューション エクスプローラーに表示されます。 npm ノードの下のエントリは、package.json ファイル内の依存関係を模倣します。
パッケージの状態
-
- インストール済みで、package.json に記載されています -
- インストールされていますが、package.json に明示的に一覧表示されていません -
- インストールされていませんが、package.json に記載されています
npm ノードを右クリックして、次のいずれかのアクションを実行します。
- 新しい npm パッケージをインストールする UI を開いて新しいパッケージをインストールします。
-
npm パッケージをインストールする npm install コマンドを実行して、 package.jsonに記載されているすべてのパッケージをインストールします。 (
npm install実行されます。) -
npm パッケージを更新するpackage.jsonで指定されたセマンティック バージョン管理 (SemVer) の範囲に従って、パッケージを最新バージョンに更新します。 (
npm update --saveを実行します。) 通常、SemVer 範囲は "~" または "^" を使用して指定されます。 詳細については、 package.json 構成を参照してください。
パッケージ ノードを右クリックして、次のいずれかのアクションを実行します。
-
npm パッケージをインストールする npm install コマンドを実行して、 package.jsonに記載されているパッケージ バージョンをインストールします。 (
npm install実行されます。) -
npm パッケージを更新するpackage.jsonで指定された SemVer 範囲に従って、パッケージ を 最新バージョンに更新します。 (
npm update --saveを実行します。通常、SemVer 範囲は "~" または "^" を使用して指定されます。 -
npm パッケージをアンインストールする パッケージをアンインストールし、 package.json から削除します (
npm uninstall --save実行)。
注
npm パッケージに関する問題の解決については、「 トラブルシューティング」を参照してください。
Node.js 対話型ウィンドウ (Node.js) で .npm コマンドを使用する
Node.js 対話型ウィンドウの .npm コマンドを使用して npm コマンドを実行することもできます。 ウィンドウを開くには、ソリューション エクスプローラーでプロジェクトを右クリックし、[ 対話型ウィンドウ Node.js 開く ] を選択します (または Ctrl + K、 N キーを押します)。
このウィンドウでは、次のようなコマンドを使用してパッケージをインストールできます。
.npm install azure@4.2.3
ヒント
既定では、npm はプロジェクトのホーム ディレクトリで実行されます。 ソリューションに複数のプロジェクトがある場合は、プロジェクトの名前またはパスを角かっこで囲んで指定します。
.npm [MyProjectNameOrPath] install azure@4.2.3
ヒント
プロジェクトに package.json ファイルが含まれていない場合は、 .npm init -y を使用して、既定のエントリを含む新しい package.json ファイルを作成します。
ASP.NET コア プロジェクト
ASP.NET Core プロジェクトなどのプロジェクトの場合は、プロジェクトに npm サポートを追加し、npm を使用してパッケージをインストールできます。
注
ASP.NET Core プロジェクトの場合は、npm の代わりに Library Manager または yarn を使用して、クライアント側の JavaScript ファイルと CSS ファイルをインストールすることもできます。 パッケージ管理に MSBuild または dotnet CLI との統合が必要な場合は、これらのオプションのいずれかが必要になることがあります。これは npm によって提供されません。
プロジェクトにpackage.jsonファイルがまだ含まれていない場合は、 package.json ファイルを プロジェクトに追加して npm サポートを有効にできます。
package.json ファイルを追加するには、ソリューション エクスプローラーでプロジェクトを右クリックし、[追加>新しい項目] を選択します (または Ctrl + SHIFT + A キーを押します)。 検索ボックスを使用して npm ファイルを検索し、npm 構成ファイル
を選択し、既定の名前を使用して、[の追加] クリックします。 package.jsonの
dependenciesまたはdevDependenciesセクションに 1 つ以上の npm パッケージ を 含めます。 たとえば、ファイルに次のコードを追加できます。"devDependencies": { "gulp": "4.0.2", "@types/jquery": "3.5.29" }ファイルを保存すると、Visual Studio はソリューション エクスプローラーの [依存関係] / [npm ] ノードの下にパッケージを追加します。 ノードが表示されない場合は、 package.json を右クリックし、[ パッケージの復元] を選択します。 パッケージのインストール状態を表示するには、[出力] ウィンドウで npm 出力を選択します。
注
npm ノードは、Blazor を含むほとんどの ASP.NET Core プロジェクトの種類で使用できます。 MAUI Blazor プロジェクトの場合は、ソリューション エクスプローラーに npm ノードが存在しないため、npm コマンド ラインを使用する必要があります。
package.jsonを使用して npm パッケージを構成できます。package.json直接開くか、ソリューション エクスプローラーで npm ノードを右クリックし、[package.jsonを開く] を選択します。
npm パッケージのトラブルシューティング
アプリのビルド時または TypeScript コードのトランスパイル時にエラーが発生した場合は、npm パッケージの非互換性が潜在的なエラーの原因であるかどうかを確認します。 エラーを特定するには、この記事で前述したように、パッケージをインストールするときに npm 出力ウィンドウを確認します。 たとえば、1 つ以上の npm パッケージ バージョンが非推奨となり、エラーが発生した場合は、エラーを修正するために、より新しいバージョンをインストールする必要がある場合があります。 package.json を使用して npm パッケージのバージョンを制御する方法については、package.json 構成を参照してください。
一部の ASP.NET Core シナリオでは、 ここで説明する既知の問題により、インストールされている npm パッケージの正しい状態がソリューション エクスプローラーに表示されない場合があります。 たとえば、パッケージはインストール時にインストールされていないと表示される場合があります。 ほとんどの場合、ソリューション エクスプローラーを更新するには、 package.jsonを削除し、Visual Studio を再起動し、この記事で前述したように package.json ファイルを再追加します。 または、パッケージをインストールするときに、npm 出力ウィンドウを使用してインストールの状態を確認できます。
ASP.NET Core シナリオによっては、プロジェクトのビルド後にソリューション エクスプローラーの npm ノードが表示されない場合があります。 ノードをもう一度表示するには、プロジェクト ノードを右クリックし、[ プロジェクトのアンロード ] を選択します。次に、プロジェクト ノードを右クリックし、[ プロジェクトの再読み込み] を選択します。
- Node.js プロジェクトの場合は、npm サポート用に Node.js 開発 ワークロードがインストールされている必要があります。 npm には Node.jsが必要です。 Node.js がインストールされていない場合は、外部のフレームワークやライブラリとの最適な互換性を確保するために 、Node.js Web サイトから LTS バージョンをインストールすることをお勧めします。