vscode npm如何執(zhí)行

這篇文章給大家分享的是有關(guān)vscode npm如何執(zhí)行的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

vscode npm怎么執(zhí)行?

vscode 調(diào)試node之npm與nodemon

調(diào)試nodejs有很多方式，可以看這一篇How to Debug Node.js with the Best Tools Available，其中我最喜歡使用的還是V8 Inspector和vscode的方式。

在vscode中，點擊那個蜘蛛的按鈕

就能看出現(xiàn)debug的側(cè)欄，接下來添加配置

選擇環(huán)境

就能看到launch.json的文件了。

啟動的時候，選擇相應(yīng)的配置，然后點擊指向右側(cè)的綠色三角

launch模式與attach模式

{
  "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
    }
  ]
}

當(dāng)request為launch時，就是launch模式了，這是程序是從vscode這里啟動的，如果是在調(diào)試那將一直處于調(diào)試的模式。而attach模式，是連接已經(jīng)啟動的服務(wù)。比如你已經(jīng)在外面將項目啟動，突然需要調(diào)試，不需要關(guān)掉已經(jīng)啟動的項目再去vscode中重新啟動，只要以attach的模式啟動，vscode可以連接到已經(jīng)啟動的服務(wù)。當(dāng)調(diào)試結(jié)束了，斷開連接就好，明顯比launch更方便一點。

在debug中使用npm啟動

很多時候我們將很長的啟動命令及配置寫在了package.json的scripts中，比如

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

我們希望讓vscode使用npm的方式啟動并調(diào)試，這就需要如下的配置

{
  "name": "Launch via NPM",
  "type": "node",
  "request": "launch",
  "runtimeExecutable": "npm",
  "runtimeArgs": [
    "run-script", "dev"//這里的dev就對應(yīng)package.json中的scripts中的dev
  ],
    "port": 9229//這個端口是調(diào)試的端口，不是項目啟動的端口
},

在debug中使用nodemon啟動

僅僅使用npm啟動，雖然在dev命令中使用了nodemon，程序也可以正常的重啟，可重啟了之后，調(diào)試就斷開了。所以需要讓vscode去使用nodemon啟動項目。

{
  "type": "node",
  "request": "launch",
  "name": "nodemon",
  "runtimeExecutable": "nodemon",
  "args": ["${workspaceRoot}/bin/www"],
  "restart": true,
  "protocol": "inspector",//相當(dāng)于--inspect了
  "sourceMaps": true,
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "runtimeArgs": [//對應(yīng)nodemon --inspect之后除了啟動文件之外的其他配置
    "--exec",
    "babel-node",
    "--presets",
    "env"
  ]
},

注意這里的runtimeArgs，如果這些配置是寫在package.json中的話，就是這樣的

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

這樣就很方便了，項目可以正常的重啟，每次重啟一樣會開啟調(diào)試功能。

可是，我們并不想時刻開啟調(diào)試功能怎么辦？

這就需要使用上面說的attach模式了。

使用如下的命令正常的啟動項目

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

當(dāng)我們想要調(diào)試的時候，在vscode的debug中運行如下的配置

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

完美！

感謝各位的閱讀！關(guān)于“vscode npm如何執(zhí)行”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！