使用yarn在Visual Studio Code中运行NodeJS项目

Question

我有一个NodeJS项目,我可以从命令行启动yarn start命令.我package.json看起来像这样:

{
  "name": "projectname",
  "version": "0.0.1",
  "description": "",
  "author": "My Name",
  "license": "",
  "scripts": {
    "start": "yarn dev",
    "dev": "yarn stop && pm2 start pm2-dev.yaml && webpack-dev-server --progress",
    "prod": "yarn stop && yarn build && pm2 start pm2-prod.yaml",
    "build": "rimraf dist lib && babel src -d lib --ignore test.js && cross-env NODE_ENV=production webpack -p --progress",
    "stop": "rimraf logs/* && pm2 delete all || true"
  },
  "dependencies": {
    "body-parser": "~1.16.0",
    "ejs": "2.5.5",
    "express": "^4.14.1",
    "pg": "^6.1.2",
    "react": "^15.4.2",
    "redux": "^3.6.0",
  },
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "cross-env": "^3.1.4",
    "eslint": "^3.13.0",
    "pm2": "^2.3.0",
    "redux-mock-store": "^1.2.2",
    "rimraf": "^2.5.4",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.2.1"
  }
}

我试图用Visual Studio Code在调试模式下启动这个项目,但几乎没有运气.我在VS Code launch.json文件中定义了我的启动配置,如下所示:

{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "yarn",
      "runtimeExecutable": "yarn",
      "runtimeArgs": [
        "start"
      ],
      "port": 5858,
      "cwd": "${workspaceRoot}",
      "timeout": 10000
    }
  ]
}

此配置的问题在于它通常会超时,因为webpack-dev-server构建时间超过10秒.我可以增加timeout我的配置,但我注意到VS Code Cannot connect to runtime process (timeout after 30000 ms).最终会产生一条消息,所以我认为这不是一个好的解决方案.此外,我的断点被这种配置忽略,这告诉我,我肯定在这里做错了.

这是我第一次尝试Visual Studio Code并且我通常不使用NodeJS,但是我package.json已经定义了所有这些脚本的这个项目所以我试图采用它,因此所有关于如何的混乱正确地运行它.

Visual Studio Code是否可以运行具有完全调试功能的这样的项目,如果是这样,我应该如何配置我的启动脚本？

Answer 1

我最终在中进行了以下配置launch.json：

{
    "type": "node",
    "request": "launch",
    "name": "Launch via Yarn",
    "runtimeExecutable": "yarn",
    "cwd": "${workspaceFolder}",
    "runtimeArgs": ["start:debug"],
    "port": 5858
}

并在scripts属性里面的以下条目package.json：

"start:debug": "node --inspect-brk=5858 ./server/index.js",

您可以包括一个timeout密钥（默认为10000），并prestart:debug在package.json其中包含任何脚本的情况下增加其值，这可能导致延迟实际节点应用程序的启动。

Answer 2

尚未使用 VS Code 中的调试功能，但我正在使用nodemonChrome 和shell脚本进行调试。

bin_dir="$__dirname/../node_modules/.bin"
src_dir="$__dirname/../src"

"$bin_dir/nodemon" --ext js,yaml \
    --watch "$src_dir/package.json" \
    --watch "$src_dir" \
    "$src_dir/index.js" \
    --exec "yarn && babel-node --inspect=0.0.0.0:9229"

打开chrome://inspect/#devices并启动调试器