読者です 読者をやめる 読者になる 読者になる

tkiryu’s blog

本ブログの内容は個人の意見です。所属組織の公式見解ではありませんのであしからず。

最近のWebフロントエンド開発環境を Visual Studio 2015 (VS Code ではない)で構築する - Angular 2 webpack ビルド編 -

-- この記事は2016/11/22(Tue)現在の情報に基づいています --

この記事をざっくり言うと

  • ASP.NET MVC プロジェクト上に webpack を使った Angular 2 の ビルド環境を構築する
  • ビルドの実行は NPM Task runner を使うといい

という話です。

準備する環境

NPM Task runner は npm-scripts(package.json の scripts に記述されたコマンド)を Visual Studio 2015 上で実行できる拡張機能です。いちいちコマンドを手入力する必要がなく、マウス操作のみで実行できます。 さらに、プロジェクトを開いたタイミングや、プロジェクトのビルドの前/後に自動実行するように設定することもできるので、とても便利です。

1つ注意点として、Visual Studio 2015 は Node.js をオプションでインストールできますが、バージョンが古いため、最新バージョンを使いたい場合は別途 Node.js をインストール必要があります。しかし、インストールしただけではパスが通っていないため Visual Studio 2015 から使うことができません。以下を参考に、パスの設定を行います。

qiita.com

チュートリアルに沿って作ってみる

Angular 2 のドキュメントに webpack を使って構築するためのチュートリアルがあるので、それに沿って環境を構築していきます。

angular.io

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

f:id:tkiryu:20161118003554p:plain

2.アプリケーションのエントリポイントの作成

文字通り、アプリケーションが最初に実行される場所を作ります。

  • src/index.html
  • src/main.ts // アプリケーションコード
  • src/vendor.ts // ベンダーコード
  • src/polyfills.ts // ポリフィルコード

f:id:tkiryu:20161118130525p:plain

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 // コンポーネントに対するテストコード

f:id:tkiryu:20161118130851p:plain

以上で、必要なファイルの作成は終わりです。

実行確認

必要なファイルが揃ったので、実際にうまく動作するか確認していきます。

1.npm install の実行

上記までは package.json の内容をチュートリアルからコピペしただけなので、実際にパッケージのダウンロードが必要です。以前の - npm パッケージインストール編 -

tkiryu.hatenablog.com

で紹介した Package Installer の機能でもインストールができますが、今回新たに追加した NPM Task runner の拡張機能を使ってみたいと思います。

package.json を右クリック > タスクランナー エクスプローラー を選択します(NPM Task runner を入れたことで使えるようになった機能です)。

f:id:tkiryu:20161119004623p:plain

すると、以下のように タスクランナー エクスプローラーのペインが現れます。

f:id:tkiryu:20161119005744p:plain

package.json > Defaults > install を右クリック > 実行 を選択します。

f:id:tkiryu:20161119005848p:plain

すると、npm install が実行され、パッケージのインストールが始まります。かなり多くのパッケージをインストールするのでそれなりに時間がかかります。問題なくインストールが終わると以下のように「プロセスコードはコード 0 で終了しました。」と表示されます。

f:id:tkiryu:20161121085959p:plain

2.npm start の実行

インストールが完了したので、早速動かしてみます。

package.json > Defaults > start を右クリック > 実行 を選択します。

f:id:tkiryu:20161121125610p:plain

タブに「start(実行中)」と表示されています。ローカルサーバーがうまく動作しているようです。

f:id:tkiryu:20161121125741p:plain

conf/webpack.dev.js の publicPath プロパティに指定した URL でアクセスできる(ログにも表示されています)ので、http://localhost:8080/ にアクセスしてみると、問題なく表示されていることが確認できました。

f:id:tkiryu:20161121125939p:plain

3.npm test の実行

続いてテストの実行です。

package.json > Defaults > test を右クリック > 実行 を選択します。

f:id:tkiryu:20161121222149p:plain

無事テストにパスしました。

f:id:tkiryu:20161121222259p:plain

4.npm build の実行

最後にプロダクションコードとしてビルドしてみます。

package.json > Custom > build を右クリック > 実行 を選択します。

f:id:tkiryu:20161121224932p:plain

ビルド成功しました。

f:id:tkiryu:20161121225130p:plain

ビルドしたファイルは dist フォルダ配下に出力されています。

f:id:tkiryu:20161121230520p:plain

以上で、全ての npm-scripts が問題なく実行できることが確認できました。

npm-scripts の VSバインディング

上記では npm-scripts を手動で実行しましたが、Visual Studio 上のイベントをトリガーにして自動実行することもできます。

バインドできるのは以下の4つのイベントです。

  • ビルド前:ソリューションのビルド前
  • ビルド後:ソリューションのビルド後
  • 消去:ソリューションのクリーン時
  • プロジェクトを開く:プロジェクトを開いた時

以下は

  • 「ビルド後」で npm test と npm build

をそれぞれバインドした状態になっています。

f:id:tkiryu:20161122015738p:plain

まとめと今後の課題

ひとまず、ASP.NET MVC プロジェクト上で Angular 2 を動かすことができるようになりました。作成したプロジェクトは GitHub にアップしましたのでご自由にお試しください。

github.com

しかし、課題もあります。

  • プロジェクト内に、フロントエンドとバックエンドのフォルダ・ファイルが入り乱れていて、把握しづらい。

f:id:tkiryu:20161121235638p:plain

などです。

フォルダ構成の整理や、ASP.NET MVC とどう調和させるかを踏まえて、ブラッシュアップさせていければと思います。