Node.js VS代码设置以启动前端和后端进行调试
我正在尝试让一个简单的react前端和nodejs后端在vs代码中运行和调试。我正在使用启动配置同时启动“客户端”和“服务器”。nodejs后端对我来说是自动启动的,但是我总是必须在控制台中执行Node.js VS代码设置以启动前端和后端进行调试,node.js,reactjs,visual-studio-code,vscode-debugger,Node.js,Reactjs,Visual Studio Code,Vscode Debugger,我正在尝试让一个简单的react前端和nodejs后端在vs代码中运行和调试。我正在使用启动配置同时启动“客户端”和“服务器”。nodejs后端对我来说是自动启动的,但是我总是必须在控制台中执行npm启动,客户端才能连接。我看到的所有教程都建议在vs代码中运行调试配置之前必须执行此步骤。vs代码不可能像启动nodejs后端一样启动前端吗 这就是my launch.json的样子: { // Use IntelliSense to learn about possible attributes.
npm启动
,客户端才能连接。我看到的所有教程都建议在vs代码中运行调试配置之前必须执行此步骤。vs代码不可能像启动nodejs后端一样启动前端吗
这就是my launch.json的样子:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"compounds": [
{
"name": "Client+Server",
"configurations": [ "Server", "Client" ]
}
],
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Server",
"program": "${workspaceFolder}/server/server.js"
},
{
"type": "chrome",
"request": "launch",
"name": "Client",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/client/src/index.js"
}
]
}
客户机需要npm启动的原因是因为您正在引用 NPMStart将实际运行一个迷你web服务器,在其上提供html文件
另一种方法是在src上使用类似于
httpserver
的东西,这将具有相同的效果我在启动调试会话时遇到一些问题,因此我决定启动nodejs
服务器,然后连接调试器
我发现这个配置适合我
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach Server",
"restart": true,
"port": 9000
}, {
"type": "chrome",
"request": "launch",
"name": "Launch Client",
"port": 9001,
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/dist",
"sourceMaps": true
}
],
"compounds": [
{
"name": "Attach Client+Server",
"configurations": ["Attach Server", "Launch Client"]
}
]
}
下面是我用于package.json
的一些脚本
{
"scripts": {
"prestart": "rollup -c -w",
"start": "nodemon --ignore '*.ts' --inspect=9000 ./dist/server/index"
},
}
我必须使用nodemon
来检测更改并重新启动节点服务器
但是如果您的React应用程序需要与您的节点应用程序分开启动,那么我建议使用类似于http服务器的方法来启动React应用程序的本地服务器。然后同时使用来同时启动两个应用程序。
您的package.json
可能如下所示:
{
"scripts": {
"prestart": "rollup -c -w",
"start:client": "http-server ./dist/client/",
"start:server": "nodemon --ignore '*.ts' --inspect=9000 ./dist/server/index",
"serve": "concurrently \"npm:start:client\" \"npm:start:server\""
},
}
资源VS代码调试配置:这在package.json中看起来如何,还是在launch.json中完成?您可以手动从命令行发出命令,将cd放入src文件夹,然后http服务器。
或者在package.json的脚本
部分添加一项。