webpack, babel, node環境で例外時のスタックトレースに元ソースの場所を表示させる
問題
nodeに読み込ませるソースをwebpackとbabelでコンパイルするようにすると,
エラー時のスタックトレースが
at Object.eval (webpack-internal:///76:29:7)
のような意味不明なものになってしまいます.
これはソースマップを有効にしていても起きてしまいます.
webpackのissueにも既にこの問題は報告されていましたが.
｢source mapはブラウザが読み込むものだからnodeは取り扱わないよ｣とownerにすげなく言われています.
解決法
evanw/node-source-map-support: Adds source map support to node.js (for stack traces)を使います.
これをインストールしてエントリーポイントに
import 'source-map-support/register'
と書きます.
それでここからが重要なのですが.
webpackが吐き出すsource mapを-dで指定されるeval-cheap-module-source-mapからinline-source-mapに切り替えます.
つまりwebpack -dではなくwebpack --debug --devtool inline-source-mapでビルドしないといけません.
そうしないとnode-source-map-supportはソースマップを認識してくれません.
これで1時間ぐらいハマりました.
設定に成功していればスタックトレースは
at Object.<anonymous> (/home/ncaq/Desktop/foobar/dist/webpack:/src/main.js:17:7)
のように元のソースの位置を含むものに変わっているはずです.
hatena-bookmark