Visual Studioでnpmパッケージ管理

ASP.NET Coreで作成したプロジェクトで久しぶりにnpmでパーケージを追加しようとしたら、どうやるのがスタンダードなやり方なのか分からなかったので（忘れた？）、今後、同様なことがあるかもしれないので、調査した内容を残しておきます。

なお、確認しているのはVisual Studio 2017（Community Edition）とちょっと古いですが、2019でもそこまで変わらないと思います。

パッケージの追加の前にテンプレートを使ったプロジェクトの初回インストールのやり方について。

プロジェクトの新規作成で「ASP.NET Core Webアプリケーション」を選択し、

続いて、AngularやReactといったテンプレートを選択してプロジェクトを作成します。

プロジェクト作成後にいきなりビルドを行って動作確認しようとするとエラーが出ます（2017だけかも？）。

エラーの内容を確認するとwebpack関連のライブラリが見つからないと出ているので、この状態になったら、ソリューションエクスプローラーにある「package.json」を右クリックして、表示されたメニューの中にある「パッケージの復元」を選択して実行します。

ステータスバーに復元の状態が表示されるので、インストール完了と表示されればOKです。

以下、必要なnpmパッケージを追加する方法になります。

Visual StudioでJS系のパッケージをインストールしようとすると、紹介されているのが、拡張機能として提供されている「Package Installer」を使う方法。

Package Installerはウィンドウ上部のメニュー「ツール」から「拡張機能と更新プログラム」を選択し、表示されたダイアログのオンラインから「Package Installer」を探してインストールすることで利用できるようになります。

Package Installerのインストール後、プロジェクトを右クリックするとメニューに「Quick Install Package...」が追加されているので、これを選択。

ダイアログが表示されたら、使用するパッケージ管理マネージャー（ここではnpm）と、インストールしたいパッケージとバージョンを入力または選択します。（下に実際に実行されるコマンドが表示されるので、コマンドに慣れた人は想像が付きやすいです）

インストールを実行すると、指定したパッケージがプロジェクトにインストールされます。もちろんプロジェクト直下のpackage.jsonにもインストールの情報が自動で追記されます。

AngularやReactといったテンプレートでプロジェクトを作成した場合、初期で配置されるpackage.jsonにインストールしたいパッケージを追記すると、ファイルの保存時に自動でインストールが行われます。

アンインストールしたい場合は、追記したパッケージを削除するだけで自動でアンインストールが実行されます。

使用するパッケージのバージョンが決まっているなら、こちらの方が使いやすいと思います。

マシンにNode.jsがインストールされているなら、ターミナル（powershellなど）を使ってパッケージをインストールすることが可能です。

Visual Studio上での操作ではないので、インストール後のビルドがちゃんと動作するかどうか不安でしたが、私の環境の場合、何事もなく動作しました。

これまでVisual Studioを使わない環境で作業していた人にとっては、こちらの方が慣れているのではないでしょうか。

ところで、今回のことで気がついたのですが、以前に作成したプロジェクトのpackage.jsonには「dependencies」に必要なパッケージが記述されていましたが、今回、新しくテンプレートを使ってプロジェクトを作成したら、「devDependencies」にパッケージが記述されていました。

自分で変えた覚えはないので、テンプレートが更新されたとかだと思うのですが、いつの間にって感じです。

本番は複数のパッケージがバンドルされたものが使われるので、「devDependencies」の方が正しいとは思いますが、今から変更したらエラーが出そうなので、とりあえず既存のプロジェクトに関してはそっとしておこうと思います。