web-dev-qa-db-ja.com

yarnを使用してVisual Studio CodeでNodeJSプロジェクトを実行する

_yarn start_コマンドを使用してコマンドラインから開始できるNodeJSプロジェクトがあります。私の_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は完全なデバッグ機能を備えたこのようなプロジェクトを実行できますか？その場合、起動スクリプトをどのように構成すればよいですか？

node.jsvisual-studio-codeyarnpkg
17
errata

私は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",

timeoutキー（デフォルトは10000）を含めることができ、prestart:debugに実際のノードアプリの起動を遅らせるpackage.jsonスクリプトがある場合、その値を増やすことができます。

2
Luke

質問の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コマンドでノードを実行しており、デバッガーがノードに接続するまでノードアプリの実行を強制的に停止します。

2
Joe B.