vscode npmの実行方法-VSCode-php.cn

vscode npmの実行方法

藏色散人

リリース： 2019-11-18 09:42:40

オリジナル

7110 人が閲覧しました

#vscode npm を実行する方法?

vscode ノード npm と nodemon をデバッグする

nodejs をデバッグするにはさまざまな方法があります。利用可能な最高のツールを使用して Node.js をデバッグする方法の記事を読むことができます。その中で、私のお気に入りの方法は V8 Inspector と vscode です。

vscode で、スパイダーボタン

をクリックしてデバッグサイドバーを表示し、構成を追加します。

環境を選択します。

launch.json ファイルを参照してください。。

開始時に、対応する構成を選択し、右向きの緑色の三角形をクリックします。

起動モードと接続モード

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}/index.js"
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Port",
      "address": "localhost",
      "port": 5858
    }
  ]
}

ログイン後にコピー

リクエストが起動されると、起動モードはい、これは vscode から起動されるプログラムです。デバッグ中の場合は、常にデバッグモードになります。アタッチモードは、すでに開始されているサービスに接続することです。たとえば、外部でプロジェクトを開始していて、突然デバッグが必要になった場合、開始したプロジェクトを閉じて vscode で再起動する必要はなく、アタッチモードで開始する限り、vscode はすでに開始されているサービスに接続できます。。デバッグが終了したら、接続を解除するだけです。これは明らかに起動よりも便利です。

npm を使用してデバッグを開始する

package.json のスクリプトに、

"scripts": {
  "start": "NODE_ENV=production PORT=8080 babel-node ./bin/www",
  "dev": "nodemon --inspect --exec babel-node --presets env ./bin/www"
},

ログイン後にコピー

などの長い起動コマンドと構成を記述することがよくあります。 npm を使用して vscode を起動してデバッグできるようにしたいのですが、それには次の構成が必要です

{
  "name": "Launch via NPM",
  "type": "node",
  "request": "launch",
  "runtimeExecutable": "npm",
  "runtimeArgs": [
    "run-script", "dev"//这里的dev就对应package.json中的scripts中的dev
  ],
    "port": 9229//这个端口是调试的端口，不是项目启动的端口
},

ログイン後にコピー

デバッグで開始するにはノードモンを使用します

ノードモンは使用されていますが、開始するには npm を使用してください。 dev コマンドでプログラムを正常に再起動できますが、再起動後はデバッグが切断されます。したがって、vscode で nodemon を使用してプロジェクトを開始できるようにする必要があります。

{
  "type": "node",
  "request": "launch",
  "name": "nodemon",
  "runtimeExecutable": "nodemon",
  "args": ["${workspaceRoot}/bin/www"],
  "restart": true,
  "protocol": "inspector",//相当于--inspect了
  "sourceMaps": true,
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "runtimeArgs": [//对应nodemon --inspect之后除了启动文件之外的其他配置
    "--exec",
    "babel-node",
    "--presets",
    "env"
  ]
},

ログイン後にコピー

ここで runtimeArgs に注目してください。これらの設定を package.json に記述すると次のようになります。

nodemon --inspect --exec babel-node --presets env ./bin/www

ログイン後にコピー

これは非常に便利です。プロジェクトは正常に再起動できます。再起動するたびに同様となり、デバッグ機能が有効になります。

しかし、デバッグ機能を常に有効にしたくない場合はどうすればよいでしょうか?

これには、上記の接続モードを使用する必要があります。

次のコマンドを使用して通常にプロジェクトを開始します

nodemon --inspect --exec babel-node --presets env ./bin/www

ログイン後にコピー

デバッグする場合は、vscode のデバッグで次の構成を実行します

{
  "type": "node",
  "request": "attach",
  "name": "Attach to node",
  "restart": true,
  "port": 9229
}

ログイン後にコピー

完璧です!

以上がvscode npmの実行方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。