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

【问题标题】：Running NodeJS project in Visual Studio Code with yarn使用 yarn 在 Visual Studio Code 中运行 NodeJS 项目
【发布时间】：2017-02-21 15:21:15
【问题描述】：

我有一个 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 能否运行这样的项目并具有完整的调试功能？如果可以，我应该如何配置我的启动脚本？

【问题讨论】：

我通常为调试做的是手动运行构建过程。然后运行 vs 代码调试。从未尝试在 1 次使用 vs 代码构建和调试

标签： node.js visual-studio-code yarnpkg

【解决方案1】：

我最终在launch.json 中有以下配置：

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

以及package.json 内的scripts 属性中的以下条目：

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

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

【讨论】：

由于某种原因，这不会显示终端输出供任何地方查看。

【解决方案2】：

我无法具体回答问题的 webpack 部分。但是，您上面的脚本将无法运行，因为您尚未启用调试。公开调试允许调试器附加到此进程，并且它还会阻止程序执行，直到附加调试器。您需要在 package.json 中创建另一个允许调试的脚本。然后，您可以使用特定于调试的脚本进行调试，并使用非调试脚本正常运行。例如：

  "scripts": {
    "start": "yarn dev",
    "dev": "node entry.js",
    "dev-debug": "node --inspect-brk=5858 entry.js",

然后，在您的 launch.json 中将“start”替换为“dev-debug”。调试端口已经在 launch.json 和 package.json 中设置为 5858，所以这应该可以工作。关键是使用 --inspect-brk 命令运行节点，强制节点应用程序的执行停止，直到调试器附加到它为止。

【讨论】：

【解决方案3】：

除了above - 为了让我的工作我必须在我的 package.json 中添加以下内容（仍然需要 exec） -

"start:debug": "nodemon --inspect-brk=5858 --exec \"babel-node\" src/index.js"

【讨论】：

欢迎来到 SO！请使用edit 添加指向此先前答案的链接。否则，排序可能会随着时间而改变。

【解决方案4】：

没有使用在 VS Code 中调试，但是我使用 nodemon 使用带有 shell 脚本的 Chrome 进行调试。

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 并启动您的调试器

【讨论】：