vscode npm怎麼執行?
vscode 調試node之npm與nodemon
#調試nodejs有很多方式，可以看這篇How to Debug Node.js with the Best Tools Available，其中我最喜歡使用的還是V8 Inspector和vscode的方式。
在vscode中，點選那個蜘蛛的按鈕
就能看出現debug的側邊欄，接下來加入設定
選擇環境
就能看到launch.json的文件了。
啟動的時候，選擇對應的配置，然後點擊指向右側的綠色三角
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
}
]
}當request為launch時，就是launch模式了，這是程式是從vscode這裡啟動的，如果是在調試那將一直處於調試的模式。而attach模式，是連線已經啟動的服務。例如你已經在外面將專案啟動，突然需要調試，不需要關掉已經啟動的專案再去vscode中重新啟動，只要以attach的模式啟動，vscode可以連接到已經啟動的服務。當調試結束了，斷開連線就好，明顯比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的方式啟動並調試，這就需要如下的配置
{
"name": "Launch via NPM",
"type": "node",
"request": "launch",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script", "dev"//这里的dev就对应package.json中的scripts中的dev
],
"port": 9229//这个端口是调试的端口，不是项目启动的端口
},在debug中使用nodemon啟動
僅僅使用npm啟動，雖然在dev指令中使用了nodemon，程式也可以正常的重啟，可重啟了之後，調試就斷開了。所以需要讓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
這樣就很方便了，專案可以正常的重啟，每次重啟一樣會開啟調試功能。
可是，我們不想時時開啟偵錯功能怎麼辦？
這就需要使用上面說的attach模式了。
使用如下的命令正常的啟動項目
nodemon --inspect --exec babel-node --presets env ./bin/www
當我們想要調試的時候，在vscode的debug中運行如下的配置
{
"type": "node",
"request": "attach",
"name": "Attach to node",
"restart": true,
"port": 9229
}完美！
以上是vscode npm怎麼執行的詳細內容。更多資訊請關注PHP中文網其他相關文章！
