1: 2016-09-08 (木) 16:50:10 takatsuka[6] [7] | 2: 2016-09-08 (木) 18:44:00 takatsuka[6] [8] | ||
---|---|---|---|
Line 9: | Line 9: | ||
という訳で手順です。 | という訳で手順です。 | ||
+ | * 手順 [#qaae379c] | ||
*** まずは前提条件として [#p69088b7] | *** まずは前提条件として [#p69088b7] | ||
Line 18: | Line 18: | ||
*** プロジェクトの用意と初期設定 [#o0034b26] | *** プロジェクトの用意と初期設定 [#o0034b26] | ||
- | + VisualStudio の 新規プロジェクト "TypeScript を使用した HTML アプリケーション" でプロジェクトを作ります。 | + | + VisualStudio の 新規プロジェクト から "TypeScript を使用した HTML アプリケーション" でプロジェクトを作ります。 |
+ package.json の作成と必要なモジュールのインストール。 | + package.json の作成と必要なモジュールのインストール。 | ||
作成したプロジェクトのカレントディレクトリをコマンドプロンプトで開きます。 | 作成したプロジェクトのカレントディレクトリをコマンドプロンプトで開きます。 | ||
Line 24: | Line 24: | ||
> npm init | > npm init | ||
nameは適当に。あとは全部デフォルトでOKです。 | nameは適当に。あとは全部デフォルトでOKです。 | ||
- | ++ webpack をインストールします。グローバルはあんまり汚さないようにローカルにインストールします。 | + | ++ webpack をインストールします。グローバルを汚すのは気が引けるのでローカルにインストールします。 |
> npm install --save webpack | > npm install --save webpack | ||
++ source-map-loader をインストールします。これもローカルにインストールします。 | ++ source-map-loader をインストールします。これもローカルにインストールします。 | ||
> npm install --save source-map-loader | > npm install --save source-map-loader | ||
- | ++ これで今現在のバージョンのモジュールがローカルにインストールされて、さらにその情報が package.json に追記されました。別 PC で同じ環境を構築するような際は、> npm install でOKです。 | + | ++ これで今現在のバージョンのモジュールがローカルにインストールされて、さらにその情報が package.json に追記されました。別 PC で同じ環境を構築するような際は > npm install とします。 |
- | + ビルドで使う webpack の設定ファイルを用意します。 | + | + ビルドで使う webpack の設定ファイルをプロジェクトのカレントディレクトリに用意します。 |
webpack.config.js | webpack.config.js | ||
#prettify{{ | #prettify{{ | ||
Line 49: | Line 49: | ||
}; | }; | ||
}} | }} | ||
- | + | + package.json にビルドコマンドを追記します。 | |
- | + package.json にビルドコマンドを記述します。 | + | |
#prettify{{ | #prettify{{ | ||
{ | { | ||
Line 56: | Line 55: | ||
"scripts": { | "scripts": { | ||
・・ | ・・ | ||
- | "build": "webpack --config ./webpack.config.js", // ←追記 | + | "build": "webpack --config ./webpack.config.js", ←追記 |
・・ | ・・ | ||
}, | }, | ||
Line 62: | Line 61: | ||
} | } | ||
}} | }} | ||
+ | + 用意したファイルをプロジェクトに追加します。 | ||
+ | VisualStudio の ソリューションエクスプローラー、プロジェクトのコンテキストメニュー[追加]-[既存の項目]で、先ほど作った webpack.config.js と package.json を追加します。 | ||
+ | + TypeScript コンパイラの設定を変更します。 | ||
+ | プロジェクトのプロパティの "TypeScript ビルド" を開いて以下のとおりにします。 | ||
+ | ++ 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キーを押して、ブラウザで正しく表示されるか確認して下さい。 | ||
+ | |||
+ | |||
+ | * よもやま [#d681779c] | ||
+ | - フロントエンドということで、複数の javascript ファイルを結合する必要があるため、結構めんどくさいです。 | ||
+ | TypeScript plugin の 1.8 では、その機能が入っていますが、プロジェクトの全ファイルを1つのファイルにしてしまうようなので、あんまり使い勝手がよくありません。それに実は、フロントエンドでは、そのファイルをそのまま動作させることは出来ないということあり、自分としては採用しませんでした。 | ||
+ | (が、フロントエンドでも動作させるための追加コードを Webで公開してる方がおられましたので、それを使うことで解決という手もあると思います。) | ||
+ | -- TypeScript plugin のバージョンアップで、その辺を解決してくれるといいなぁと思います。そうなると Node.js や webpack などのモジュールインストールも不要になるので・・。 |
(This host) = https://thinkridge.com