TypeScript + webpack で Visual Studio Code の debugger をためした。

webpack はこの blog では昨年 2015-01-04 以来の登場。「browserify でいいや」という状況だったのだけど、browserify (watchify) より高速という噂を聞いたので試してみた次第。

Visual Studio Code の debugger は 2016-03-02 で試した。そのときは多段 Source Map の設定をうまくできず断念した。TypeScript -> Babel の構成から Babel をなくし、TypeScript だけにしたこともあるので再挑戦した。

結論から言うと Visual Studio Code の debugger を動かせるようになった。Editor から breakpoint を設定し step into / out / over できるようになり、とても便利だ。

• Visual Studio Code の Debugger for Chrome Microsoft/vscode-chrome-debug
• webpack の source map loader webpack/source-map-loader
• TypeScript の tsc

を組み合わせている。設定の例は boajs/counter-boa 。

webpack で ts-loader を使っても良かったのかもしれないけど、browserify でも tsify を使っていないので、これで良いと思う。webpack / browserify の役割は require を browser で動かすための変換だけにしたい。 tsc -> webpack の構成を取り、webpack 側で多段 source map を解決した。2016-03-02 とは違って babel がなくなったこともあり、問題なく変換できた。

気になる点はいくつかある。

• Chrome 側で Developer Tool を開くと切断する→ Inspect を同時にできない
• Chrome 側で reload しないと breakpoint が聞かない

そのうち直るかな……。