技術系備忘録​/TypeScript​/VisualStudioでのフロントエンド開発環境 をテンプレートにして作成 :: シンクリッジ

開始行:
VisualStudio2015 (or 2013 ) + TypeScript plugin を使った... javascript が正しく出来上がるのはもちろんですが、VisualSt... もちろん実際の開発現場では、いろいろなライブラリを導入し... 肝(イところ)は、 流行の VisualStudioCode ではなく VisualStudio を使ってる... TypeScript コンパイラも、TypeScript plugin のものを使うあ... JavaScript のバージョンや開発環境の流行など、進歩の速い分... という訳で手順です。 * 手順 *** まずは前提条件として + ネットに繋がる Windows（7 以上）の PC を用意。 + VisualStudio2015 (or 2013 ) をインストール。 + VisualStudio の 拡張機能と更新プログラム から TypeScrip... + Node.js をインストール。 *** プロジェクトの用意と初期設定 + VisualStudio の 新規プロジェクト から "TypeScript を使... + package.json の作成と必要なモジュールのインストール。 作成したプロジェクトのカレントディレクトリをコマンドプロ... ++ package.json を生成します。 > npm init nameは適当に。あとは全部デフォルトでOKです。 ++ webpack をインストールします。グローバルを汚すのは気が... > npm install --save webpack ++ source-map-loader をインストールします。これもローカル... > npm install --save source-map-loader ++ これで今現在のバージョンのモジュールがローカルにインス... + ビルドで使う 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 の ソリューションエクスプローラー、プロジェ... + TypeScript コンパイラの設定を変更します。 プロジェクトのプロパティの "TypeScript ビルド" を開いて以... &ref(TypeScriptVisualStudio00.png,mw:400,mh:400); -- JSX compilation in TSX files: ⇒ React -- モジュールシステム ⇒ CommonJS + ビルドコマンドが実行されるように、ビルドイベントを記述... プロジェクトのプロパティの "ビルドイベント" の "ビルド後... npm run build これでビルド時に package.json に追記したコマンドが実行さ... + ビルドによって生成された javascript ファイルが実行され... <script src="app.js"></script> となっている箇所を、 <script src="bundle.js"></script> に変更します。 + これで設定はすべて完了です。F5キーを押して、ブラウザで... さらに、適当にブレークポイント貼ってみてソースコードでデ... &ref(TypeScriptVisualStudio01.png,mw:400,mh:400); * よもやま - フロントエンドということで、複数になるであろうソースフ... TypeScript 1.8 では標準で結合機能があるので、webpack 等を... （が、ブラウザでも動かせるようにするコードを Webで公開し... -- TypeScript plugin のバージョンアップで、その辺を解決し... TypeScritp の開発者様とマイクロソフト様に感謝しつつ期待し...

終了行:
VisualStudio2015 (or 2013 ) + TypeScript plugin を使った... javascript が正しく出来上がるのはもちろんですが、VisualSt... もちろん実際の開発現場では、いろいろなライブラリを導入し... 肝(イところ)は、 流行の VisualStudioCode ではなく VisualStudio を使ってる... TypeScript コンパイラも、TypeScript plugin のものを使うあ... JavaScript のバージョンや開発環境の流行など、進歩の速い分... という訳で手順です。 * 手順 *** まずは前提条件として + ネットに繋がる Windows（7 以上）の PC を用意。 + VisualStudio2015 (or 2013 ) をインストール。 + VisualStudio の 拡張機能と更新プログラム から TypeScrip... + Node.js をインストール。 *** プロジェクトの用意と初期設定 + VisualStudio の 新規プロジェクト から "TypeScript を使... + package.json の作成と必要なモジュールのインストール。 作成したプロジェクトのカレントディレクトリをコマンドプロ... ++ package.json を生成します。 > npm init nameは適当に。あとは全部デフォルトでOKです。 ++ webpack をインストールします。グローバルを汚すのは気が... > npm install --save webpack ++ source-map-loader をインストールします。これもローカル... > npm install --save source-map-loader ++ これで今現在のバージョンのモジュールがローカルにインス... + ビルドで使う 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 の ソリューションエクスプローラー、プロジェ... + TypeScript コンパイラの設定を変更します。 プロジェクトのプロパティの "TypeScript ビルド" を開いて以... &ref(TypeScriptVisualStudio00.png,mw:400,mh:400); -- JSX compilation in TSX files: ⇒ React -- モジュールシステム ⇒ CommonJS + ビルドコマンドが実行されるように、ビルドイベントを記述... プロジェクトのプロパティの "ビルドイベント" の "ビルド後... npm run build これでビルド時に package.json に追記したコマンドが実行さ... + ビルドによって生成された javascript ファイルが実行され... <script src="app.js"></script> となっている箇所を、 <script src="bundle.js"></script> に変更します。 + これで設定はすべて完了です。F5キーを押して、ブラウザで... さらに、適当にブレークポイント貼ってみてソースコードでデ... &ref(TypeScriptVisualStudio01.png,mw:400,mh:400); * よもやま - フロントエンドということで、複数になるであろうソースフ... TypeScript 1.8 では標準で結合機能があるので、webpack 等を... （が、ブラウザでも動かせるようにするコードを Webで公開し... -- TypeScript plugin のバージョンアップで、その辺を解決し... TypeScritp の開発者様とマイクロソフト様に感謝しつつ期待し...

ページ名: