nodejs于vscode断点调试的可用配置

使用vscdoe编写nodejs是很方便的，正常使用情景下(windows)按F5便可运行调试程序了。

想要使用新特性但是实际生产环境下的node版本较低，算是比较常见的情况。这是为了满足此种情况需要使用上babel进行构建兼容代码。而在vscode下中想调试程序又该如何操作呢？

思路

首先得使用babel把代码构建出来，然后在vscode中运行它。

具体配置如下：

1. 在.vscode目录下添加任务

   // # .vscode/tasks.json
   {
       "version": "2.0.0",
       "tasks": [
           {
               "label": "build",
               "type": "shell",
               "command": "babel",
               "args": [
                   "src",
                   "-d",
                   "lib/src",
                   "-s"
               ]
           }
       ]
   }

2. 在.vscode目录下添加调试配置

   // # .vscode/launch.json
   {
       "version": "0.2.0",
       "configurations": [
           {
               "type": "node",
               "request": "launch",
               "name": "Launch Babel",
               "program": "${workspaceRoot}/lib/src/index.js",
               "cwd": "${workspaceRoot}",
               "preLaunchTask": "build",
               "outFiles": [
                   "${workspaceRoot}/lib/src/**.js"
               ]
           }
       ]
   }

3. 按下F5运行调试

断点调试"src/index.js"，实则是运行"lib/src/index.js"并经过source-map得知原文件位置进行调试。

除了上面说的外，还有一些方法"babel-node运行调试"和"在入口处加上babel-register并直接运行"等等各类思路，这里就不一一说明。

关于babel的一些说明

目前babel已经提供babel-preset-env工具帮助我们很好地解决版本兼容的问题。

比如node端的兼容，只需简单设置.babelrc：

# .babelrc
{
    "presets": [
        ["env", {
            "target": {
                "node": "current"
            }
        }]
    ]
}

还有web端像autoprefixer那样的设置版本兼容：

# .babelrc
{
    "presets": [
        ["env", {
            "target": {
                "browsers": [
                    "> 5%"
                ]
            },
            "useBuiltIns": true
        }]
    ]
}

# src/bootstrap.js
import "babel-polyfill"

送上例子仓库