webpack, babel, node環境で例外時のスタックトレースに元ソースの場所を表示させる

問題

nodeに読み込ませるソースをwebpackとbabelでコンパイルするようにすると,エラー時のスタックトレースがat Object.eval (webpack-internal:///76:29:7)のような意味不明なものになってしまいます.

これはソースマップを有効にしていても起きてしまいます.

webpackのissueにも既にこの問題は報告されていましたが.

SourceMap don't link to an src file but to webpack-internal:///[LINE_NUMBER] · Issue #5186 · webpack/webpack

「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)のように元のソースの位置を含むものに変わっているはずです.

このエントリーをはてなブックマークに追加 fb-like g-plusone pocket