技術系備忘録​/TypeScript​/VisualStudioでのフロントエンド開発環境

手順

まずは前提条件として

1. ネットに繋がる Windows（7 以上）の PC を用意。
2. VisualStudio2015 (or 2013 ) をインストール。
3. VisualStudio の 拡張機能と更新プログラム から TypeScript plugin (今は1.8系が最新安定版なのでそれ) をインストール。
4. Node.js をインストール。

プロジェクトの用意と初期設定

1. VisualStudio の 新規プロジェクト から "TypeScript を使用した HTML アプリケーション" でプロジェクトを作ります。
2. package.json の作成と必要なモジュールのインストール。
   作成したプロジェクトのカレントディレクトリをコマンドプロンプトで開きます。
   1. package.json を生成します。

      > npm init

      nameは適当に。あとは全部デフォルトでOKです。
   2. webpack をインストールします。グローバルを汚すのは気が引けるのでローカルにインストールします。

      > npm install --save webpack

   3. source-map-loader をインストールします。これもローカルにインストールします。

      > npm install --save source-map-loader

   4. これで今現在のバージョンのモジュールがローカルにインストールされて、さらにその情報が package.json に追記されました。別 PC で同じ環境を構築するような際は > npm install とします。
3. ビルドで使う webpack の設定ファイルをプロジェクトのカレントディレクトリに用意します。
   • webpack.config.js

     module.exports = {
     	entry: "./app.js",
     	output: {
     		filename: "./bundle.js",
     	},
     	devtool: "source-map",
     	module: {
     		preLoaders: [
     			{
     				test: /\.js$/,
     				loader: "source-map-loader"
     			}
     		]
     	}
     };

4. package.json にビルドコマンドを追記します。

   {
   	・・
   	"scripts": {
   		"build": "webpack --config ./webpack.config.js",	←追記
   		・・
   	},
   	・・
   }

5. 用意したファイルをプロジェクトに追加します。
   VisualStudio の ソリューションエクスプローラー、プロジェクトのコンテキストメニュー[追加]-[既存の項目]で、先ほど作った webpack.config.js と package.json を追加します。
6. TypeScript コンパイラの設定を変更します。
   プロジェクトのプロパティの "TypeScript ビルド" を開いて以下のとおりにします。
   
   • JSX compilation in TSX files: ⇒ React
   • モジュールシステム ⇒ CommonJS
7. ビルドコマンドが実行されるように、ビルドイベントを記述します。
   プロジェクトのプロパティの "ビルドイベント" の "ビルド後に実行するコマンドライン" に以下を記述します。

   npm run build

   これでビルド時に package.json に追記したコマンドが実行されます。
8. ビルドによって生成された javascript ファイルが実行されるように index.html を書き換えます。

   <script src="app.js"></script>

   となっている箇所を、

   <script src="bundle.js"></script>

   に変更します。
9. これで設定はすべて完了です。F5キーを押して、ブラウザで正しく表示されるか確認して下さい。
   さらに、適当にブレークポイント貼ってみてソースコードでデバッグ出来るか試してみてください。
   

よもやま

• フロントエンドということで、複数になるであろうソースファイルを結合する必要があるため、結構めんどくさいです。
  TypeScript 1.8 では標準で結合機能があるので、webpack 等を使わなくても結合は出来るのですが、プロジェクトの全ファイルを１つにしてしまうようで、あんまり使い勝手がよくありません。それに実は、ブラウザではそのファイルをそのままでは動かせなかったりと、自分としてはイマイチだなーと思ってました。
  （が、ブラウザでも動かせるようにするコードを Webで公開してる方がおられましたので、それを使うことで解決という手もあると思います。）
  • TypeScript plugin のバージョンアップで、その辺を解決してくれるといいなぁと思います。そうなると Node.js や webpack などもとりあえず不要になり開発の敷居は下がりそうです。
    TypeScritp の開発者様とマイクロソフト様に感謝しつつ期待したいところです。