Edited at

webpack で TypeScript プロジェクトをビルドする際の設定

More than 1 year has passed since last update.

TypeScript で記述されたプロジェクトを webpack でビルドする際に利用するパッケージや webpack のプラグインについて。


ts-node

webpack の設定ファイルも TypeScript で記述可能になる。詳細は こちら を参照。


tslint

TypeScript 用の lint ツール。


tslint-react

TypeScript を利用した React プロジェクト用の tslint 用ルール。


tslint-config-prettier

prettier と tslint の設定がコンフリクトしないように tslint 側の prettier と被る設定を無効にしてくれるルール。


ts-loader

TypeScript を JavaScript に変換する webpack プラグイン。型チェックはこれにやらせずに、下記の fork-ts-checker-plugin で行う。型チェックを別プロセスで行い速度を早めた同様のものに awesome-typescript-loader というのがあるが、 TypeScript Handbook や Microsoft謹製 TypeScript-React-Starter などではこちらが利用されている。


fork-ts-checker-webpack-plugin

TypeScript の型チェックを行う webpack プラグイン。 上記 ts-loader との組み合わせで利用。 組み合せでの設定方法は こちら を参照。

tslint もこれから呼び出せる。呼び出し方は こちら を参照。


tsconfig-paths-webpack-plugin

tsconfig.jsonpaths に記述されたモジュールを解決するための webpack プラグイン。 これ入れとかないと paths で設定したエイリアスでのモジュール解決ができない。


ts-jest

Jest でテストする際のトランスパイラ。設定方法は こちら を参照。