1: 2016-09-08 (木) 16:50:10 takatsuka  |
現: 2016-09-10 (土) 14:04:26 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 コンパイラも、TypeScript plugin のものを使うあたりです。 |
| | | | |
| - | JavaScript のバージョンや開発環境の流行はコロコロ変わるので、いつまで役にたつ情報かわかりませんが、けっこう苦労したので備忘録かねて。 | + | JavaScript のバージョンや開発環境の流行など、進歩の速い分野なのですぐ古い情報になっちゃうと思いますが、けっこう苦労したので備忘録かねて。 |
| | | | |
| | という訳で手順です。 | | という訳で手順です。 |
| | | | |
| - | *** まずは前提条件として [#p69088b7] | + | * 手順 [#f9a6518c] |
| | + | *** まずは前提条件として [#zc20e965] |
| | | | |
| - | + VisualStudio2015 (or 2013 ) をインストール | + | + ネットに繋がる Windows（7 以上）の PC を用意。 |
| - | + VisualStudio の 拡張機能と更新プログラム から TypeScript plugin (今は1.8系が最新安定版なのでそれ) をインストール | + | + VisualStudio2015 (or 2013 ) をインストール。 |
| - | + Node.js をインストール | + | + VisualStudio の 拡張機能と更新プログラム から TypeScript plugin (今は1.8系が最新安定版なのでそれ) をインストール。 |
| | + | + Node.js をインストール。 |
| | | | |
| | *** プロジェクトの用意と初期設定 [#o0034b26] | | *** プロジェクトの用意と初期設定 [#o0034b26] |
| | | | |
| - | + VisualStudio の 新規プロジェクト "TypeScript を使用した HTML アプリケーション" でプロジェクトを作ります。 | + | + VisualStudio の 新規プロジェクト から "TypeScript を使用した HTML アプリケーション" でプロジェクトを作ります。 |
| | + package.json の作成と必要なモジュールのインストール。 | | + package.json の作成と必要なモジュールのインストール。 |
| | 作成したプロジェクトのカレントディレクトリをコマンドプロンプトで開きます。 | | 作成したプロジェクトのカレントディレクトリをコマンドプロンプトで開きます。 |
| | > 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{{ |
| | module.exports = { | | module.exports = { |
| | output: { | | output: { |
| | filename: "./bundle.js", | | filename: "./bundle.js", |
| - | devtoolModuleFilenameTemplate: "[resource-path]", | |
| | }, | | }, |
| | devtool: "source-map", | | devtool: "source-map", |
| | }; | | }; |
| | }} | | }} |
| - | | + | + package.json にビルドコマンドを追記します。 |
| - | + package.json にビルドコマンドを記述します。 | + | |
| | #prettify{{ | | #prettify{{ |
| | { | | { |
| | ・・ | | ・・ |
| | "scripts": { | | "scripts": { |
| - | ・・ | + | "build": "webpack --config ./webpack.config.js", ←追記 |
| - | "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 の開発者様とマイクロソフト様に感謝しつつ期待したいところです。 |
ページへ戻る
