TypeScriptで書いてwebpackでビルドしたjsファイルのエラーをわかりやすくする

Why

webpackでバンドルしてるのでスタックトレースを見てもtsファイルでのエラー箇所がわからない・・

What

node-source-map-supportをインストールして、tsconfig.json, webpack.config.jsを修正します

node-source-map-supportのインストール

$ npm install source-map-support

tsファイルの修正

webpackのエントリポイントにしているtsファイルに以下を追加します。

app.ts

import sourceMapSupport from 'source-map-support'
sourceMapSupport.install()

設定ファイルの修正

webpack, TypeScriptの設定ファイルを修正します。

webpack.config.js

module.exports = {
    mode: 'development',
    target: 'node',
+   devtool: 'inline-source-map',
    ...
}

↑ちなみに、 devtool: 'inline-source-map'でも動きました。

tsconfig.js

{
  "compilerOptions": {
+   "sourceMap": true
   ...
  }
}

これで、webpackでビルドし直すと、エラー時にtsファイルの行数も教えてくれるようになりました

こんなかんじ （app.tsの73行目でエラーになってることがわかる）

at Object.<anonymous> (/path/to/project/dist/webpack:/src/app.ts:73:4)

以上です

参考

• evanw/node-source-map-support: Adds source map support to node.js (for stack traces)
• (TypeScriptで書かれてWebpackでビルドされた) CloudFunctionsのエラー通知をわかりやすくしてみた - selmertsxの素振り日記
• webpack, babel, node環境で例外時のスタックトレースに元ソースの場所を表示させる - ncaq
• NBM2 - TypeScript + WebPack でSourceMapを有効にする
• javascript - Is there source map support for typescript in node / nodemon? - Stack Overflow
• err.stackに含まれるコードの位置情報をsource mapで元に戻す - Qiita