ASP.NET Core で npm を使用する

2018/03/30

ASP.NET Core で npm を使用する

## 環境

- Visual Studio 2017
- Node.js v8.9.4

## package.json の作成

### Visual Studio で作成

ソリューションエクスプローラーからプロジェクトを右クリックし、[追加] > [新しい項目] を選択します。

[npm 構成ファイル] を追加します。

すると、以下の内容で `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` で検索するとすぐに見つかります。）

ダウンロード後は、一度 Visual Studio を再起動するとインストールされます。

パッケージをインストールするには、プロジェクトを右クリックし、[Quick Install Package] を選択します。

コンボボックスで `npm` を選択し、インストールしたいパッケージ名を入力して `install` をクリックするとインストールされます。

### 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

へっぽこプログラマーの備忘録

2018/03/30

ASP.NET Core で npm を使用する

Translate

Popular Posts

Labels

Blog Archive