Visual Studio Code を利用して node.js のプロジェクトのデバッグを行うとブレークポイントの利用ができるなど非常に便利です。しかし、babelを利用してコードのトランスパイルを行っていると、デフォルトの設定ではブレークポイントを貼り付けることができません。ここではその対応を行い、bableを利用してもブレークポイントを利用してデバッグができるようにします。
ビルドをするscriptを定義する
babelでコードをトランスパイラするためのscriptをpackage.json
に定義します。
"scripts": {
"build": "babel src/ -d build/ --source-maps",
}
パスなどは自分の環境に合わせて変更をしてください。--source-maps
というオプションを付けてトランスパイル元のファイルと前のファイルを結びつけます。
タスクを定義する
次に、Visual Studio Code で利用するタスクを定義します。.vscode/tasks.json
を編集します。
{
"version": "2.0.0",
"tasks": [
{
"identifier": "build",
"type": "npm",
"script": "build",
"problemMatcher": []
}
]
}
Visual Studio Code からnpm run build
を呼び出すことができるように成りました。
実行の構成を作る
最後にVisual Studio Code の実行のための構成を作ります。.vscode/launch.json
を編集します。
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/build/index.js",
"preLaunchTask": "build",
"sourceMaps": true,
"outFiles": ["${workspaceRoot}/build"]
}
]
}
preLaunchTask
で先程定義をしたbuild
タスクを呼び出してbabelによるトランスパイルを行います。sourceMaps
オプションをtrue
としoutFiles
にトランスパイルされたファイルが格納されているディレクトリのリストを指定します。
Visual Studio Codeのデバッグ->デバッグの開始
でコードの実行ができます。また、トランスパイル前のコードにブレークポイントを設定しても、コードを停止することが可能です。
まとめ
Visual Studio Codeのデバッグ機能を利用してbableによってトランスパイルされたコードに対してもブレークポイントを利用するための設定を紹介しました。
Comments
Let's comment your feelings that are more than good