13
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Visual Studio 2017でMVCプロジェクトにnpmを導入する

Last updated at Posted at 2017-12-28

ASP.NET MVCでは、JavaScriptライブラリとしてKnockout.jsが付属していた時期が続きました。

時間の経過っともに、Knockout自体はメンテナンスされているものの、大幅なバージョンアップはされないような感じになっています。
その背景から、モダンなJavaScriptライブラリとの親和性が無かったりと、なかなか使いづらくなってきました。
そこで、最近のメジャーなスタックを使って改修できないかといろいろと検討していたところ、Vue.jsが良さげということなので、ASP.NET MVCプロジェクトに導入する方法をまとめました。

Nugetでインストール

当然ながらはじめは、Nugetでインストールを試みました。(この段階でちょっと不安ありましたが)
Visual Studioのパッケージマネージャーから検索し、まずは本体をインストール。
image.png

次に型定義ファイルもインストールします。(もはやピュアなJavaScriptでの開発は出来ない体なのです)
残念ながらバージョンが古すぎる。メンテナンスがされていないようです。
image.png

と、Nugetでのパッケージ管理を諦めることになりました。

npmでインストール

であれば、Vue.jsの更新サイトにあるように普通にnpmパッケージでライブラリを管理を試してみました。
Visual Studio上では標準でnpmをサポートしていないようです。(bowerはあるのに)

そのため、拡張機能で検索すると、「Package Installer」なる機能がありました。
ダウンロード数もまずまずです。
image.png

インストール方法

プロジェクトを右クリックし「Quick install Package」を選択
管理パッケージでnpmを選択し、インストールしたいパッケージ名を入力後、バージョンを選択
image.png

無事、インストールできました。
また、自動でpacakge.jsonも作成され、MVCプロジェクトの管理対象となります。
インストールされるnode_modules配下はプロジェクト管理対象外となっています。

npmで管理されてるVue.jsはデフォルトで型定義ファイルをサポートしているので、これで問題解決です。

再インストール

pacakge.jsonを右クリックし「パッケージの復元」を選択すると、再インストールできます。

今後クラシックなASP.NET MVCであってもクライアントライブラリはnpm管理が良さそーです。
これで、やりたいこと全部できましたが、今後はタスクランナーとかでwebpackとかと連動させて見ようと思います。

次回は、Vue.JS周りの記事を書いていこうと思います。

13
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?