Visual Studioでnpm

多分皆さんはVisual StudioでNuGetでJSライブラリも.NETで使用するライブラリも管理してると思います。
今回はJSライブラリをnpmで管理出来るようにVisual Studioでnpmが使えるようにします。もちろんVisual Studio使わないでnpmしても(ry Visual Studioでnpmする場合、拡張機能をインストールする必要があります。

Package Installer

Visual Studio拡張機能です。
npm、Bower、Typings等をVisual Studioから利用することが出来るようになります。
https://marketplace.visualstudio.com/items?itemName=MadsKristensen.PackageInstaller

Package Installerの導入

Package Installerをインストールします。 ツール->拡張機能と更新プログラムから拡張機能と更新プログラムの画面を開きます。
オンラインを選択し、package installerを検索します。

f:id:mt9116:20171206103252p:plain

Package Installerをダウンロードします。
Package Installerを有効にするためにダウンロードしたらVisual Studioを再起動しましょう。

Package Installerの使い方

ソリューションを右クリックし、メニューにQuick Install Packageが表示されるのでそれを選択します。

f:id:mt9116:20171206103725p:plain

すると、ダイアログが表示され、npmを使用することが出来ます。

f:id:mt9116:20171206103818p:plain

実際に、Package Installerでjqueryを入れてみると

f:id:mt9116:20171206104026p:plain

node_modules配下にjqueryが置かれていますね。
また、package.jsonが作成されます。

{
  "name": "myproject",
  "version": "1.0.0",
  "devDependencies": {
    "jquery": "^3.2.1"
  }
}

また、package.jsonを右クリックするとRestore Packageがメニューに表示されます。

f:id:mt9116:20171206105543p:plain

これでpackage.jsonからnode_modulesを復元することが出来ます。
package.jsonをプロジェクト内で共有すればJSライブラリのバージョンを一元管理出来そうですね。

最後に

Package Installerを導入することでVisual Studio上からnpm等を行うことが出来るようになります。
Nugetでサーバサイドのライブラリを管理して、npmでクライアントサイドのライブラリを管理することも出来ます。