技術系備忘録​/TypeScript​/VisualStudioでのフロントエンド開発環境 のバックアップソース(No.1) :: シンクリッジ

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

VisualStudio2015 (or 2013 ) + TypeScript plugin を使った開発環境の構築です。
javascript が正しく出力出来るのはもちろんですが、VisualStudio 上でソースコードデバッグ（*.ts、*.tsx ファイルでのデバッグ）も出来ます。

キモ(イところ)は、
流行の VisualStudioCode ではなく VisualStudio を使ってることと、
TypeScript コンパイラも、一般的な tsc コマンドは使わず TypeScript plugin のものを使うあたりです。

JavaScript のバージョンや開発環境の流行はコロコロ変わるので、いつまで役にたつ情報かわかりませんが、けっこう苦労したので備忘録かねて。

という訳で手順です。

*** まずは前提条件として [#p69088b7]

+ 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 でOKです。
+ ビルドで使う webpack の設定ファイルを用意します。
webpack.config.js
#prettify{{
module.exports = {
	entry: "./app.js",
	output: {
		filename: "./bundle.js",
		devtoolModuleFilenameTemplate: "[resource-path]",
	},
	devtool: "source-map",
	module: {
		preLoaders: [
			{
				test: /\.js$/,
				loader: "source-map-loader"
			}
		]
	}
};
}}

+ package.json にビルドコマンドを記述します。
#prettify{{
{
	・・
	"scripts": {
		・・
		"build": "webpack --config ./webpack.config.js",	// ←追記
		・・
	},
	・・
}
}}

• 技術系備忘録/TypeScript/VisualStudioでのフロントエンド開発環境 のバックアップ一覧^[5]
• 技術系備忘録/TypeScript/VisualStudioでのフロントエンド開発環境 のバックアップソース(No. All)
  • 1: 2016-09-08 (木) 16:50:10 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^[9] takatsuka^[6]