Visual Studio Code (vscode)上で、MEANスタックのデバッグ開発環境を構築してみる #Node.js

こんにちは。はじめまして。Javaとか.NETでご飯食べてる系男子です。

挑戦に至った経緯

Visual Studio Code（以下、vscode）が既存の◯tomや◯ublimeTextよりも軽快で気に入ったことと、フロント界隈でMEANスタックなるものが流行っていると聞いた（遅い）ことから、vscode上でそれの開発環境をバッチリ作ってしまおうと思ったからです。
ちなみにどれもこれも初めてです。補足、指摘お願い致します。

開発環境

・Windows10
・node.js v6.11.0(Nodistでインストール)
・npm 4.0.5
・generator-angular-fullstack v4.2.0
　https://github.com/angular-fullstack/generator-angular-fullstack

手順

ジェネレータで適当に雛形を作成
　※今回はTypeScript, Sequelizeを選択（他の選択肢はお好みで。MongoDBとか知らない。。。）
vscodeで開いて、launch.jsonを書き換える
書き換え内容は以下

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      // １．gulpタスクでビルド
      "type": "node",
      "request": "launch",
      "name": "Gulp serve:debug",
      "program": "${workspaceRoot}/node_modules/gulp/bin/gulp.js",
      "args": [
        "serve:debug"
      ],
      "env": {
          "NODE_ENV": "development",
          // 最新のsequelizeだとcallback変数の戻り値をきちんと書けと煩いので黙らせとく
          "BLUEBIRD_WARNINGS": "0"
      },
      "console": "integratedTerminal"
    },
    {
      // ２．起動後、ノードプロセスにアタッチ
      "type": "node",
      "request": "attach",
      "name": "Attach to server",
      "port": 9229
    },
    {
      // ３．Chromeのデバッグポートにアタッチ
      // ※ChromeショートカットプロパティURL末尾に --remote-debugging-port=9222を追記
      "name": "Attach to client",
      "type": "chrome",
      "request": "attach",
      "webRoot": "${workspaceRoot}",
      "port": 9222,
      "sourceMaps": true,
      "trace": true
    }
  ]
}

順にコメントの数字に沿って説明していきます。
① yeomanのangular-fullstackはビルド時にgulp（旧バージョンはgrunt）を使っていて、クライアント側はwebpackでトランスパイルしたり、監視したり、色々している。なので、app.jsなどをprogramに指定して叩くのではなく、gulpのコマンドを実行するようにタスクを作成する。

② 1番が最後まで進むと、node-inspector（Chromeデバッガツールでnode.jsプログラムをデバッグ出来る便利なやつ）がURLを開けと表示するので、そうなったら2番のこのタスクを起動してください。
たぶん、デフォルトでデバッグポートは9229だと思いますが、念のため以下のように指定しています。

gulpfile.babel.js

gulp.task('start:server:debug', () => {
    process.env.NODE_ENV = process.env.NODE_ENV || 'development';
    config = require(`./${serverPath}/config/environment`);
    nodemon(`-w ${serverPath} --inspect=9229 --debug-brk ${serverPath}`)
        .on('log', onServerLog);
});

③ 2番実行後、vscodeのindex.jsの最初の行でブレイクしていると思うので、それを進行させて下さい。ちなみに最初の行でステップを止めたくない場合は、上記ファイルの--debug-brkオプションを削除して下さい。
進行するとChromeにサイトが表示されますので、その後に3つ目のタスクを実行して下さい。
ちなみにこのタスクは、vscodeのプラグインを利用しています。
https://github.com/Microsoft/vscode-chrome-debug
ここで大事なのは、コメントにもありますが、あらかじめクロームのデバッグポートを指定して起動しておく必要がありますので、ご注意下さい。

以上でサーバ・クライアント双方のデバッグがvscode上で出来るようになっていると思います。

補足（というより本題）

実は、上の手順だけでは上手く行かず、当方の環境では以下の問題がありました。

■Webpackのプラグインが邪魔をしてnode-inspectorが正常に動かない

webpackに組み込まれているawsome-typescript-loaderがデバッグモードの時だけ上手く動きませんでした。
どうやらこいつが別プロセスで動き出すようで、デバッグモード時に子のチャンネルが死んでるとエラーが出てクラッシュします。この辺の知識が全く無いので何とも言えませんが、とりあえずコメントアウト。多分、並列でTypeScriptの検証を行ってくれてwebpackのビルドが早くなるっていう奴かな？とりあえず問題無さそうなので、切りました。

webpack.make.js

config.plugins = [
        /*
         * Plugin: ForkCheckerPlugin
         * Description: Do type checking in a separate process, so webpack don't need to wait.
         *
         * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
         */
        //new ForkCheckerPlugin(),

        // Reference: https://github.com/webpack/extract-text-webpack-plugin
        // Extract css files
        // Disabled when in test mode or not in build mode
        new ExtractTextPlugin('[name].[hash].css', {
            disable: !BUILD || TEST
        })
    ];
});

■その他

起動に直接影響するわけではないですが、その他にも色々問題がありました。
・seed.jsの表記がおかしくてUserテーブルに正常にテストデータが入らない
・auth.service.tsでlodashをimportしているが、正しくはrequireで読み込む
（他にもありましたが忘れました。思い出したら追記します）
デカデカと赤字でエラーが出たので、デバッグが上手くいかない原因がこれじゃないのかと疑ったりしてしまって、無駄な時間を結構使ってしまいました。

感想

昨今のフロント周りに踏み入れたのはこれが初めてだったので、ジェネレータで吐かれるファイルを読んで調べての繰り返しでした。とりあえず、これでスッキリした開発環境は構築できたはずなので、バリバリ開発してノウハウを蓄積していきたいと思っています。
取り組んでいる間は投稿も常に更新していこうと思っているので、同じくフロントの魔窟に挑もうとする新進気鋭の同士や偉大なる先駆者の方々のツッコミをお待ちしております。

それでは。。。