Visual Studio で npm パッケージマネージャーを利用する手順を紹介します。

概要

JavaScriptのライブラリなどでは、nugetではなく、npmでパッケージ管理をしたい場合があります。 この記事では、Visual Studio で npmパッケージマネージャーを利用する手順を紹介します。

手順

プロジェクトを作成します。今回はASP.NET Core のアプリケーションを作成しています。


ソリューションエクスプローラーのプロジェクトのノードを右クリックし、ポップアップメニューの [追加]メニューの[新しい項目]の項目をクリックします。


[新しい項目の追加]ダイアログが表示されます。


中央の項目の一覧から [npm 構成ファイル]の項目をクリックして選択します。 ファイル名はデフォルトの package.json のままとします。ダイアログ右下の[追加]ボタンをクリックします。


package.jsonファイルが追加されます。

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

パッケージを追加します。今回は、chart.js を追加します。"devDependencies" 部分にパッケージの記述を追加します。 パッケージ名を設定すると、利用可能なバージョンの候補が表示されます。


以下の内容に変更しました。

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

ソリューションエクスプローラーの[依存関係]のノードをクリックして展開します。 子ノードに "NPM" のノードが追加され、NPMの子ノードにパッケージのノードが表示されています。 パッケージは記述を追加したのみでまだインストールされていないため "インストールされていません" の表示になっています。


NPMノード内のパッケージのノード(今回の場合は chart.js のノード)をクリックして選択し、右クリックします。 下図のポップアップメニューが表示されます。[パッケージの復元]の項目をkじゅりっくします。


nmpパッケージがインストールされ、"インストールされていません" の表示が無くなります。


npmパッケージにパッケージを追加して、パッケージをインストールできました。

インストールしたパッケージは、プロジェクトのディレクトリの "node_modules" ディレクトリ内にインストールされます。


"node_modules" ディレクトリ内にパッケージ名のディレクトリが作成され、ディレクトリ内にパッケージのファイルが配置されています。