ASP.NET Core で npm を使用する

Bower が非推奨になったということで、代わりに npm を使用します。 ## 環境 - Visual Studio 2017 - Node.js v8.9.4 ## package.json の作成 ### Visual Studio で作成 ソリューションエクスプローラーからプロジェクトを右クリックし、[追加] > [新しい項目] を選択します。 [npm 構成ファイル] を追加します。 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi40DvG-yQtGM1VwWr399_5Obb63tnhzx-TC1KBkokE3LoRgS_Qr_RAsPm36obnTmEHOLdJNu16qZkbPTuFVQtREUWQJuCWybfRHeTrsq1T_L-q38A55Cc1MvfM-tg7qn53hqwaHCMECtw/s1600/npm01.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi40DvG-yQtGM1VwWr399_5Obb63tnhzx-TC1KBkokE3LoRgS_Qr_RAsPm36obnTmEHOLdJNu16qZkbPTuFVQtREUWQJuCWybfRHeTrsq1T_L-q38A55Cc1MvfM-tg7qn53hqwaHCMECtw/s320/npm01.png" width="320" height="222" data-original-width="941" data-original-height="653" /></a> すると、以下の内容で `package.json` が作成されます。 ```json { "version": "1.0.0", "name": "asp.net", "private": true, "devDependencies": { } } ``` ### npm で作成 以下のコマンドで作成することもできます。 ```sh > npm init ``` ## パッケージのインストール ### Visual Studio からインストール `package.json` を変更します。 `package.json` 自体の書き方については省略します。 ```json { "version": "1.0.0", "name": "asp.net", "private": true, "devDependencies": { "bootstrap": "^3.3.7", "jquery": "^2.2.0", "jquery-validation": "^1.14.0", "jquery-validation-unobtrusive": "^3.2.6" } } ``` ソリューションエクスプローラーから `package.json` を右クリックし、[パッケージの復元] を選択するとインストールされます。 プロジェクトルートに `node_modules` というフォルダが作成され、そこにパッケージがダウンロードされています。 ### Package Installer Visual Studio の拡張機能に `Package Installer` というのがあり、これを使えばもっと簡単にインストールすることもできます。 Visual Studio のメニューから、[ツール] > [拡張機能と更新プログラム] を選択します。 [オンライン] から [Package Installer] をダウンロードします。 （`npm` で検索するとすぐに見つかります。） <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaUylb_fdhM3mLA7u5dTcDjbePyqCs2QcU8_vaSzrS0iC1PvZlXtHi5-HHqqmig8yvEhrp8hUcJEeZap8390kqtnuL_fr_n10EM4eHOExa0rw5M8D9hIWIbkQBriLkTVMN89_HD6Qp0wI/s1600/npm02.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaUylb_fdhM3mLA7u5dTcDjbePyqCs2QcU8_vaSzrS0iC1PvZlXtHi5-HHqqmig8yvEhrp8hUcJEeZap8390kqtnuL_fr_n10EM4eHOExa0rw5M8D9hIWIbkQBriLkTVMN89_HD6Qp0wI/s320/npm02.png" width="320" height="222" data-original-width="941" data-original-height="653" /></a> ダウンロード後は、一度 Visual Studio を再起動するとインストールされます。 パッケージをインストールするには、プロジェクトを右クリックし、[Quick Install Package] を選択します。 コンボボックスで `npm` を選択し、インストールしたいパッケージ名を入力して `install` をクリックするとインストールされます。 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTOK9W8ubG3ieRlKNIOLpc90R0hthL7_rivwL0mLnDc5SokaQryFOfF4hwNUxMwSS7xa65EVsT04DI2ksFJEbTPwY3_NXziIlY7tigF4CsMSZjCItWE9veK3rQSD9yE8cYyxd1-gu-G3I/s1600/npm03.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTOK9W8ubG3ieRlKNIOLpc90R0hthL7_rivwL0mLnDc5SokaQryFOfF4hwNUxMwSS7xa65EVsT04DI2ksFJEbTPwY3_NXziIlY7tigF4CsMSZjCItWE9veK3rQSD9yE8cYyxd1-gu-G3I/s320/npm03.png" width="320" height="104" data-original-width="457" data-original-height="149" /></a> ### npm からコマンドでインストール npm で直接インストールすることもできます。 例えば以下のような感じです。 ```sh >npm install jquery --save-dev ``` インストールしたパッケージを自動的に `packages.json` に追加 `--save-dev` を指定します。 デフォルトではパッケージのバージョンは最新となります。 ## このあとは 前述したとおり、npm でインストールしたパッケージは `node_modules` に配置されます。 実際に ASP.NET Core で Web アプリケーションを動作させる場合は、`wwwroot` に配置する必要があります。 これを自動化するためには gulp を使用するそうですが、それはまた今度書きます。 ## 参考 URL - https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower - https://www.linkedin.com/pulse/use-npm-instead-bower-gulp-grunt-visual-studio-aspnet-naghizadeh