2: 2016-09-08 (木) 18:44:00 takatsuka |
3: 2016-09-08 (木) 22:27:11 takatsuka |
| VisualStudio2015 (or 2013 ) + TypeScript plugin を使った開発環境の構築です。 | | VisualStudio2015 (or 2013 ) + TypeScript plugin を使った開発環境の構築です。 |
- | javascript が正しく出力出来るのはもちろんですが、VisualStudio 上でソースコードデバッグ(*.ts、*.tsx ファイルでのデバッグ)も出来ます。 | + | javascript が正しく出来上がるのはもちろんですが、VisualStudio 上でソースコードデバッグ(*.ts、*.tsx ファイルでのデバッグ)も出来るようにしてあります。 |
| | | |
- | キモ(イところ)は、 | + | 肝(イところ)は、 |
| 流行の VisualStudioCode ではなく VisualStudio を使ってることと、 | | 流行の VisualStudioCode ではなく VisualStudio を使ってることと、 |
| TypeScript コンパイラも、一般的な tsc コマンドは使わず TypeScript plugin のものを使うあたりです。 | | TypeScript コンパイラも、一般的な tsc コマンドは使わず TypeScript plugin のものを使うあたりです。 |
| | | |
- | JavaScript のバージョンや開発環境の流行はコロコロ変わるので、いつまで役にたつ情報かわかりませんが、けっこう苦労したので備忘録かねて。 | + | JavaScript のバージョンや開発環境の流行は頻繁に変わるので、いつまで役にたつ情報かわかりませんが、けっこう苦労したので備忘録かねて。 |
| | | |
| という訳で手順です。 | | という訳で手順です。 |
- | * 手順 [#qaae379c] | |
- | *** まずは前提条件として [#p69088b7] | |
| | | |
- | + VisualStudio2015 (or 2013 ) をインストール | + | * 手順 [#f9a6518c] |
- | + VisualStudio の 拡張機能と更新プログラム から TypeScript plugin (今は1.8系が最新安定版なのでそれ) をインストール | + | *** まずは前提条件として [#zc20e965] |
- | + Node.js をインストール | + | |
| + | + ネットに繋がる Windows(7 以上)の PC を用意。 |
| + | + VisualStudio2015 (or 2013 ) をインストール。 |
| + | + VisualStudio の 拡張機能と更新プログラム から TypeScript plugin (今は1.8系が最新安定版なのでそれ) をインストール。 |
| + | + Node.js をインストール。 |
| | | |
| *** プロジェクトの用意と初期設定 [#o0034b26] | | *** プロジェクトの用意と初期設定 [#o0034b26] |
| ++ これで今現在のバージョンのモジュールがローカルにインストールされて、さらにその情報が package.json に追記されました。別 PC で同じ環境を構築するような際は > npm install とします。 | | ++ これで今現在のバージョンのモジュールがローカルにインストールされて、さらにその情報が package.json に追記されました。別 PC で同じ環境を構築するような際は > npm install とします。 |
| + ビルドで使う webpack の設定ファイルをプロジェクトのカレントディレクトリに用意します。 | | + ビルドで使う webpack の設定ファイルをプロジェクトのカレントディレクトリに用意します。 |
- | webpack.config.js | + | -- webpack.config.js |
| #prettify{{ | | #prettify{{ |
| module.exports = { | | module.exports = { |
| | | |
| | | |
- | * よもやま [#d681779c] | + | * よもやま [#c94f2411] |
- | - フロントエンドということで、複数の javascript ファイルを結合する必要があるため、結構めんどくさいです。 | + | - フロントエンドということで、複数になるであろうソースファイルを結合する必要があるため、結構めんどくさいです。 |
- | TypeScript plugin の 1.8 では、その機能が入っていますが、プロジェクトの全ファイルを1つのファイルにしてしまうようなので、あんまり使い勝手がよくありません。それに実は、フロントエンドでは、そのファイルをそのまま動作させることは出来ないということあり、自分としては採用しませんでした。 | + | TypeScript 1.8 では標準で結合機能があるので、webpack 等を使わなくても結合は出来るのですが、プロジェクトの全ファイルを1つにしてしまうようで、あんまり使い勝手がよくありません。それに実は、ブラウザではそのファイルをそのままでは動かせないということあり、自分としてはイマイチだなーと思ってました。 |
- | (が、フロントエンドでも動作させるための追加コードを Webで公開してる方がおられましたので、それを使うことで解決という手もあると思います。) | + | (が、ブラウザでも動かせるようにするコードを Webで公開してる方がおられましたので、それを使うことで解決という手もあると思います。) |
- | -- TypeScript plugin のバージョンアップで、その辺を解決してくれるといいなぁと思います。そうなると Node.js や webpack などのモジュールインストールも不要になるので・・。 | + | -- TypeScript plugin のバージョンアップで、その辺を解決してくれるといいなぁと思います。そうなると Node.js や webpack などもとりあえず不要になるので・・。 |