メニュー
ブログ更新履歴
コンテンツ更新履歴
リンク
  • Magome
  • クラウドベースのMIDIシーケンサ
    音楽制作に興味のある方を対象に、スタンドアロンでも使え、ネットならではの面白さも兼ね備えた音楽制作アプリの提供を目指しています。
twitter
1: 2016-09-08 (Thu) 16:50:10 takatsuka source
Line 1: Line 1:
 +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", // ←追記
 +     ・・
 +    },
 +    ・・
 +}
 +}}


Front page   Diff Backup Copy Rename ReloadPrint View   New Page Page list Search Recent changes   Help   RSS of recent changes (RSS 1.0) RSS of recent changes (RSS 2.0) RSS of recent changes (RSS Atom) Powered by xpWiki
Counter: 3310, today: 1, yesterday: 1