最近のWebフロントエンド開発環境を Visual Studio 2015 (VS Code ではない)で構築する - Angular 2 webpack ビルド編 -
-- この記事は2016/11/22(Tue)現在の情報に基づいています --
この記事をざっくり言うと
- ASP.NET MVC プロジェクト上に webpack を使った Angular 2 の ビルド環境を構築する
- ビルドの実行は NPM Task runner を使うといい
という話です。
準備する環境
- Visual Studio 2015 Update 3
- Node.js v6.9.1
- npm v3.10.8
- ASP.NET MVC 5 プロジェクト
- NPM Task runner
NPM Task runner は npm-scripts(package.json の scripts に記述されたコマンド)を Visual Studio 2015 上で実行できる拡張機能です。いちいちコマンドを手入力する必要がなく、マウス操作のみで実行できます。 さらに、プロジェクトを開いたタイミングや、プロジェクトのビルドの前/後に自動実行するように設定することもできるので、とても便利です。
１つ注意点として、Visual Studio 2015 は Node.js をオプションでインストールできますが、バージョンが古いため、最新バージョンを使いたい場合は別途 Node.js をインストール必要があります。しかし、インストールしただけではパスが通っていないため Visual Studio 2015 から使うことができません。以下を参考に、パスの設定を行います。
チュートリアルに沿って作ってみる
Angular 2 のドキュメントに webpack を使って構築するためのチュートリアルがあるので、それに沿って環境を構築していきます。
1.設定ファイルの作成
設定系のファイルだけでこれだけの数を作成しないといけません。Webフロントエンド開発環境は本当に複雑になりました。。
- package.json // npm パッケージ
- tsconfig.json // TypeScript 用設定ファイル
- webpack.config.js // webpack でビルドするために必要な設定ファイル
- config/webpack.common.js // 共通
- config/webpack.dev.js // 開発
- config/webpack.prod.js // 本番
- config/helper.js // path を解決するためのヘルパー関数
- karma.conf.js // karma でテストを実行するために必要な設定ファイル
- config/karma.conf.js // karma 自体の設定ファイル
- config/webpack.test.js // テストに webpack を使用するための設定ファイル
- config/karma-test-shim.js //
2.アプリケーションのエントリポイントの作成
文字通り、アプリケーションが最初に実行される場所を作ります。
- src/index.html
- src/main.ts // アプリケーションコード
- src/vendor.ts // ベンダーコード
- src/polyfills.ts // ポリフィルコード
3.コンポーネントの作成
ようやく Angular 2 らしいコードが現れました。コンポーネント単位で html, js, css をまとめて1つのフォルダで管理します。
- src/app/app.module.ts // モジュール
- src/app/app.component.ts // ロジック
- src/app/app.component.html // テンプレート
- src/app/app.component.css // スタイル
- src/app/app.component.spec.ts // コンポーネントに対するテストコード
以上で、必要なファイルの作成は終わりです。
実行確認
必要なファイルが揃ったので、実際にうまく動作するか確認していきます。
1.npm install の実行
上記までは package.json の内容をチュートリアルからコピペしただけなので、実際にパッケージのダウンロードが必要です。以前の - npm パッケージインストール編 -
で紹介した Package Installer の機能でもインストールができますが、今回新たに追加した NPM Task runner の拡張機能を使ってみたいと思います。
package.json を右クリック > タスクランナー エクスプローラー を選択します(NPM Task runner を入れたことで使えるようになった機能です)。
すると、以下のように タスクランナー エクスプローラーのペインが現れます。
package.json > Defaults > install を右クリック > 実行 を選択します。
すると、npm install が実行され、パッケージのインストールが始まります。かなり多くのパッケージをインストールするのでそれなりに時間がかかります。問題なくインストールが終わると以下のように「プロセスコードはコード 0 で終了しました。」と表示されます。
2.npm start の実行
インストールが完了したので、早速動かしてみます。
package.json > Defaults > start を右クリック > 実行 を選択します。
タブに「start(実行中)」と表示されています。ローカルサーバーがうまく動作しているようです。
conf/webpack.dev.js の publicPath プロパティに指定した URL でアクセスできる（ログにも表示されています）ので、http://localhost:8080/ にアクセスしてみると、問題なく表示されていることが確認できました。
3.npm test の実行
続いてテストの実行です。
package.json > Defaults > test を右クリック > 実行 を選択します。
無事テストにパスしました。
4.npm build の実行
最後にプロダクションコードとしてビルドしてみます。
package.json > Custom > build を右クリック > 実行 を選択します。
ビルド成功しました。
ビルドしたファイルは dist フォルダ配下に出力されています。
以上で、全ての npm-scripts が問題なく実行できることが確認できました。
npm-scripts の VSバインディング
上記では npm-scripts を手動で実行しましたが、Visual Studio 上のイベントをトリガーにして自動実行することもできます。
バインドできるのは以下の４つのイベントです。
- ビルド前：ソリューションのビルド前
- ビルド後：ソリューションのビルド後
- 消去：ソリューションのクリーン時
- プロジェクトを開く：プロジェクトを開いた時
以下は
- 「ビルド後」で npm test と npm build
をそれぞれバインドした状態になっています。
まとめと今後の課題
ひとまず、ASP.NET MVC プロジェクト上で Angular 2 を動かすことができるようになりました。作成したプロジェクトは GitHub にアップしましたのでご自由にお試しください。
しかし、課題もあります。
- プロジェクト内に、フロントエンドとバックエンドのフォルダ・ファイルが入り乱れていて、把握しづらい。
- ASP.NET MVC の View が使えていない。
などです。
フォルダ構成の整理や、ASP.NET MVC とどう調和させるかを踏まえて、ブラッシュアップさせていければと思います。
