ASP.NET Core プロジェクトでnpmパッケージをインストールする - Visual Studio

ASP.NET Core プロジェクトでnpmパッケージをインストールする手順を紹介します。

手順

プロジェクトの作成

Visula Studio を起動し、ASP.NET Coreのアプリケーションのプロジェクトを作成します。

npm構成ファイルの追加

ソリューションエクスプローラーでnpmパッケージをインストールしたいプロジェクトのノードをクリックして選択し、右クリックします。 ポップアップメニューの[追加]サブメニューの[新しい項目]をクリックします。


[新しい項目の追加]ダイアログが表示されます。中央のエリアのファイルの種類のリストから[npm 構成ファイル]の項目をクリックして選択します。 ダイアログ下部のファイル名はデフォルトの package.json を利用します。ダイアログ右下の[追加]ボタンをクリックします。


package.json ファイルがプロジェクトに追加されました。

npm構成ファイルにインストールするパッケージを追加

package.jsonファイルを修正します。

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
  }
}

"devDependencies" セクションにプロジェクトにインストールするパッケージを記述します。
記述方法は次の形式になります。 今回は、以下の内容を記述しました。 lottie-web パッケージをインストールします。

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "lottie-web": "5.10.2"
  }
}

package.jsonファイルを保存すると、ソリューションエクスプローラーのプロジェクトノードの中の[依存関係]ノードに[NPM]のノードが追加されます。 [NPM]のノードを展開すると、package.jsonに入力したパッケージ名のノードが追加されています。


まだ、npmパッケージはインストールされていないため "インストールされていません" のアラートメッセージが表示されています。

npmパッケージのインストール

npmパッケージをインストールします。ソリューションエクスプローラーの npm構成ファイルのpackage.jsonファイルをクリックして選択します。 右クリックしてポップアップメニューを表示します。ポップアップメニューの[パッケージの復元]の項目をクリックします。


npmパッケージのインストールが始まります。


インストールが完了すると、ソリューションエクスプローラーのプロジェクトノードの中の[依存関係]ノードに[NPM]のノード内の npmパッケージの項目の"インストールされていません"の表示がなくなり、アラートのアイコンの表示も消えます。

ログの確認

npmの実行結果のログは、[出力]ウィンドウで[出力元]を[npm]に変更すると確認できます。

パッケージのインストール先

ASP.NET Core アプリケーションのプロジェクトディレクトリをエクスプローラーで表示します。node_modulesフォルダが作成されています。


node_modulesフォルダを開きます。フォルダ内にnpmパッケージ名のフォルダと.package-lock.json ファイルが作成されています。


パッケージ名のフォルダを開くと、パッケージに含まれるファイルが表示されます。