TypeScript用開発環境を整えたのでメモ
TypeScript用開発環境を整えるのでなんやかんや試して、自分なりにミニマムで開発しやすい環境を作れたので、それのメモ。 個人的には一番 IntelliJ IDEA 上でステップ実行できたってのがでかい。
一応作ったソースとか設定とかはGitHub上にあげておきます。
やりたいこと
- TypeScriptを書きたい
- ソースはモジュール化しておきたい
- import/export などを解決したい
- 今回はフロントエンドに使用したいので、jQueryも使えるようにしておきたい
- IntelliJ IDEA 上でステップ実行したい
やったこと
まずは作業ディレクトリに移動
$ cd <作業ディレクトリのパス>
なにはともあれ npm init
$ npm init
とりあえずEnter連打。 細かいところはあとから修正します。
typescriptをインストール
$ npm install typescript -g
webpackをインストール
今回は依存関係の解決にwebpackを使用するのでwebpackもインストールします。 一緒に、webpackでtypescriptを扱うためのts-loaderもインストールします。
$ npm install webpack -g $ npm install ts-loader --save-dev
webpack.confing.jsを作成
次にwebpack用設定ファイルを作成する。
// コマンドメモ // --watch : ファイルの変更を監視 ビルドの自動化 // $ webpack --progress --colors --watch var path = require('path'); module.exports = { // エントリーポイント entry: './script/src/main.ts', // ソースマップ出力 devtool: "#source-map", // 出力先設定 output: { path: __dirname, filename: './script/dist/bundle.js' }, module: { loaders: [ { test: /\.ts$/, loader: 'ts-loader' } ] }, resolve: { // ここに登録した拡張子は import時に省略できる extensions: ['', '.ts', '.js'] } };
tsconfig.json を作成
TypeScriptからJavaScriptへ変換する際の設定ファイル(とお思います。) とりあえず以下のコピペで問題ない(と思います。)
{ "compilerOptions": { "module": "commonjs", "target": "es5", "noImplicitAny": false, "sourceMap": true }, "exclude": [ "typings/main.d.ts", "typings/main", "node_modules" ] }
その2 に続く