最近のWebフロントエンド開発環境を Visual Studio 2015 (VS Code ではない)で構築する - npm パッケージインストール編 -
-- この記事は2016/10/18(Tue)現在の情報に基づいています --
この記事をざっくり言うと
- Visual Studio 2015 に Package Installer という拡張機能をインストールする
- Package Installer の機能で npm パッケージを簡単にインストールする
- Webフロントエンドの開発も Visual Studio 2015 (VS Codeではない)でやるのもいいかも
という話です。
まえがき
最近のWebフロントエンド開発環境を構築するには、何を差し置いても npm がないと始まりません。コマンドプロンプト(Windows)やターミナル(Mac)で npm コマンドを打ち込んでパッケージをインストールしたりビルドしたり、一方で、Sublime Text, Atom, 最近だと Visual Studio Code などの高機能エディタを使ってコーディングするというスタイルが一般的かなと思います。自分もそのようにやっています。
ただ最近では仕事柄、Visual Studio 2015 を使って ASP.NET MVC ベースで Webアプリを作ることが多いのですが、環境構築なんかをやるときに大抵のことはGUIで設定できてしまうので、Visual Studio はやっぱり完成度高いなと使っていて思います。(当然ながらWindowsでしか動きませんし、非力なマシンだと動作が重いのがデメリットではあります。。)
なので、Visual Studio のメリットを活かして、npmのエコシステムをなるべくGUIで簡単に扱う方法はないかなと探していたところ、まさにぴったりな方法があったので、使い方や所感などを書いていきたいと思います。
準備
準備といっても大したことをするわけではなく、
Package Installer
visualstudiogallery.msdn.microsoft.com
という拡張機能を Visual Studio 2015 にインストールするだけです。
npm パッケージのインストール方法
インストールが終わった後は、ASP.NET MVC のプロジェクトを作成します。
ソリューションエクスプローラーのプロジェクトを右クリック > Quick Install Package... を選択します(Package Installerを入れたことで使えるようになった機能です)。
ダイアログが表示されるので、左のドロップダウンリストから"npm"を選択します。
次に、インストールしたいパッケージ名を真ん中のテキストボックスに入力します。
試しに jQuery をインストールしてみようと"jq"まで打ち込んだ瞬間、"jquery"にオートコンプリートされました。これはスゴイ！
パッケージ名が入力されると、下に npm コマンドが生成されます。太字で表示されている部分はコマンドオプションで編集が可能です。オプション「--save-dev」は開発時にのみ使うパッケージとして package.json に書き込むオプションなので、「--save」に変更します。
しかもこのテキストボックスでは検索もでき、キーワードにマッチしたパッケージがドロップダウンリストから選択できるようになっています。
ちなみに、コマンドプロンプトでインストールする場合は、あらかじめWebでパッケージ名を調べておくか、
npm search キーワード
で検索しておかなければいけないので、それと比べるとかなりお手軽です！
さらに、右のドロップダウンからバージョンを選択します。最新バージョンの 3.1.1 を選択します。
最後に Install ボタンをクリックします。
ソリューションエクスプローラーの｢すべてのファイルを表示｣メニューをクリックすると、ツリーがリフレッシュされて
が追加されていることがわかります。
コマンドプロンプトでやる場合は、一番最初に
npm init
して予め package.json を作っておかなければいけないのですが、このツールを使えばパッケージインストールと同時に勝手に作ってくれるのですごく楽です。
今度は lodash を先ほどの要領でインストールしてみます。
"lo"と入力した途端"lodash"にオートコンプリートされ、バージョン情報も自動で取得してきてくれたものの中から選択できました。最後に Install ボタンをクリックしてインストールします。
はい、追加されました。とても簡単ですね！
※なお、複数のパッケージを同時にインストールすることもできます。その場合はスペースで区切ってテキストボックスに入力します。
package.json はこんな感じになりました。
そして極め付きはこれです！
package.json を直接編集しているのですが、なんと、インテリセンスが効きます。しかも、パッケージ名も、バージョンも。こんなことできたらいいなと思っていたことが実現されていて驚愕しました。
※なお、package.json を直接編集した場合は、そのままではインストールされないので、後述のパッケージの復元の操作を行うことでインストールできます。
npm パッケージのバージョン管理システムでの管理方法
このツールによって
- node_modules フォルダ
- package.json ファイル
が生成されますが、Git や TFS などのバージョン管理システムで管理するのは package.json だけでOKです。
node_modules フォルダ配下のファイルたちは、package.json さえあれば簡単に復元することができます。
npm パッケージの復元方法
まず node_modules フォルダをまるごと削除してパッケージがインストールされていない状態にします。 そしてこの状態で package.json を右クリック > パッケージの復元 をクリックします。
しばらくしてツリーをリフレッシュすれば
jQuery と lodash は元通りに復元されていますし、package.json に直接追加した Material Design Lite もインストールされていることが分かります。 簡単ですね。
npmパッケージの参照方法
最後に、インストールしたnpmパッケージの参照方法についてです。
今回のように、インストールしたパッケージがビルド不要なものであれば
~/node_modules/material-design-lite/material.css ~/node_modules/material-design-lite/material.js ~/node_modules/jquery/dist/jquery.js ~/node_modules/lodash/lodash.js
という Path で cshtml や BundleConfig.js からそのまま参照することができます。
まとめ
率直な感想として、Package Installer を使うと npm パッケージをインストールするのがかなり楽になりました。コマンドプロンプトからだとたまにカレントフォルダを間違えていたりするのですが、Visual Studio の場合はプロジェクトフォルダ内で閉じているので気にしなくてよかったり、やっぱりGUIで操作できるのは大きいです。さらには package.json 直接編集でもインテリセンスが効くという凄さ。これだけでも十分にフロントエンドの開発を Visual Studio 2015 で行うメリットがあるように感じます。
サーバーサイドも ASP.NET MVC で開発、デプロイも Azure に、という場合は Visual Studio だけで全て完結するので、理想的な開発環境だと言えそうです。
今回はパッケージのインストールについてしか言及しませんでしたが、最近のフロントエンド開発ではほとんどの場合ビルドが必要になり、このビルド環境を構築するのが難しかったりします。
次回はビルドについて書いてみようと思います。
