技術系備忘録​/TypeScript​/VisualStudioでのフロントエンド開発環境 のソース :: シンクリッジ

• 差分^[1] を表示
• 技術系備忘録/TypeScript/VisualStudioでのフロントエンド開発環境^[2] へ行く。

VisualStudio2015 (or 2013 ) + TypeScript plugin を使った開発環境の構築です。
javascript が正しく出来上がるのはもちろんですが、VisualStudio 上でソースコードデバッグ（*.ts、*.tsx ファイルでのデバッグ）も出来るようにしてあります。
もちろん実際の開発現場では、いろいろなライブラリを導入したり、サーバーアプリ開発と連携させたりと、やることはまだまだあると思いますが、とりあえず最小構成というとこで。

肝(イところ)は、
流行の VisualStudioCode ではなく VisualStudio を使ってることと、
TypeScript コンパイラも、TypeScript plugin のものを使うあたりです。

JavaScript のバージョンや開発環境の流行など、進歩の速い分野なのですぐ古い情報になっちゃうと思いますが、けっこう苦労したので備忘録かねて。

という訳で手順です。

* 手順 [#f9a6518c]
*** まずは前提条件として [#zc20e965]

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

*** プロジェクトの用意と初期設定 [#o0034b26]

+ VisualStudio の 新規プロジェクト から "TypeScript を使用した HTML アプリケーション" でプロジェクトを作ります。
+ package.json の作成と必要なモジュールのインストール。
作成したプロジェクトのカレントディレクトリをコマンドプロンプトで開きます。
++ package.json を生成します。
 > npm init
nameは適当に。あとは全部デフォルトでOKです。
++ webpack をインストールします。グローバルを汚すのは気が引けるのでローカルにインストールします。
 > npm install --save webpack
++ source-map-loader をインストールします。これもローカルにインストールします。
 > npm install --save source-map-loader
++ これで今現在のバージョンのモジュールがローカルにインストールされて、さらにその情報が package.json に追記されました。別 PC で同じ環境を構築するような際は > npm install とします。
+ ビルドで使う webpack の設定ファイルをプロジェクトのカレントディレクトリに用意します。
-- webpack.config.js
#prettify{{
module.exports = {
	entry: "./app.js",
	output: {
		filename: "./bundle.js",
	},
	devtool: "source-map",
	module: {
		preLoaders: [
			{
				test: /\.js$/,
				loader: "source-map-loader"
			}
		]
	}
};
}}
+ package.json にビルドコマンドを追記します。
#prettify{{
{
	・・
	"scripts": {
		"build": "webpack --config ./webpack.config.js",	←追記
		・・
	},
	・・
}
}}
+ 用意したファイルをプロジェクトに追加します。
VisualStudio の ソリューションエクスプローラー、プロジェクトのコンテキストメニュー[追加]-[既存の項目]で、先ほど作った webpack.config.js と package.json を追加します。
+ TypeScript コンパイラの設定を変更します。
プロジェクトのプロパティの "TypeScript ビルド" を開いて以下のとおりにします。
&ref(TypeScriptVisualStudio00.png,mw:400,mh:400);
-- JSX compilation in TSX files: ⇒ React
-- モジュールシステム ⇒ CommonJS
+ ビルドコマンドが実行されるように、ビルドイベントを記述します。
プロジェクトのプロパティの "ビルドイベント" の "ビルド後に実行するコマンドライン" に以下を記述します。
 npm run build
これでビルド時に package.json に追記したコマンドが実行されます。
+ ビルドによって生成された javascript ファイルが実行されるように index.html を書き換えます。
 <script src="app.js"></script>
となっている箇所を、
 <script src="bundle.js"></script>
に変更します。
+ これで設定はすべて完了です。F5キーを押して、ブラウザで正しく表示されるか確認して下さい。
さらに、適当にブレークポイント貼ってみてソースコードでデバッグ出来るか試してみてください。
&ref(TypeScriptVisualStudio01.png,mw:400,mh:400);

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

• 技術系備忘録/TypeScript/VisualStudioでのフロントエンド開発環境 のバックアップ一覧^[4]
• 技術系備忘録/TypeScript/VisualStudioでのフロントエンド開発環境 のバックアップソース(No. All)
  • 1: 2016-09-08 (木) 16:50:10^[5] takatsuka^[6]
  • 2: 2016-09-08 (木) 18:44:00^[7] takatsuka^[6]
  • 3: 2016-09-08 (木) 22:27:11^[8] takatsuka^[6]
  • 現: 2016-09-10 (土) 14:04:26 takatsuka^[6]