使用Visual Studio Code调试Webpack捆绑的节点ts [英] Debug webpack bundled node ts with Visual Studio Code

问题描述

(在某种程度上与相关 但更特定于VsCode )

我正在尝试使用Visual Studio代码调试 AngularU入门工具包. 但这会将ts输出合并到单个bundle.js和侧面bundle.js.map :

I m trying to debug the AngularU starter kit with visual studio code. But it's merging the ts output inside a single bundle.js with a side bundle.js.map:

↳web
  ↳dist
    ↳client
    ↳server
      ⇒bundle.js
      ⇒bundle.js.map
  ↳src
    ⇒server.ts
    ⇒client.ts

当我尝试运行它时，我从VS UI中得到一个错误:

When i try to run it i m getting an error from VS UI:

request 'launch': cannot launch program '/home/.../web/src/server.ts'; setting the 'outDir' attribute might help

当未合并输出文件时，

outDir 在我的其他项目(不使用webpack)上可以正常工作，但是在这里没有帮助.可以肯定他正在寻找server.js(但是只有bundle.js及其映射文件).

outDir works fine on my others projects (not using webpack) when output files are not merged, but here it doesnt help. Pretty sure he is looking for server.js (but there is only a bundle.js and its map file).

生成的单个文件输出是否有outFile选项?

Is there any outFile option for generated single file ouput?

我的launch.json:

My launch.json:

{
        "name": "WebServer",
        "type": "node",
        "request": "launch",
        "program": "./web/src/server.ts",
        "stopOnEntry": false,
        "args": [],
        "cwd": "./web",
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "env": {
            "NODE_ENV": "development"
        },
        "externalConsole": false,
        "sourceMaps": true,
        "outDir": "./web/dist/server"
}

编辑:当我将Webpack服务器输出重命名为 server.js 和 server.map.js (而不是捆绑包)时，它会运行.*)，但不幸的是，断点无法正常工作:

It does run when i rename the webpack server output as server.js and server.map.js (instead of bundle.*), but the breakpoints are not working unfortunately:

这是server.js.map文件的内容.

根据本教程，将TS编译器和Webpack都配置为创建源地图.

Both TS compiler and Webpack are configured to create sourcemap according to this tutorial.

我想念什么吗?

EDIT2 :断点的问题似乎是映射文件中的源URI.

EDIT2: The probleme with breakpoints seems to be the sources URI in the map file.

当我转动这个

"webpack:///./src/server.ts",

进入此

"../../src/server.ts",

断点正在工作.

推荐答案

这是我的工作方式:

1. 在最低1.1.0版本中具有VsCode(旧版本将与sourceRoot斗争)

1. Have VsCode atLeast 1.1.0 (older will struggle with sourceRoot)

将捆绑文件设置为与webpack.config.js中的父目录相同的名称

Set the bundle file the same name as its parent directory in webpack.config.js

output: {
path: path.join(__dirname, 'dist', 'server'),    
filename: 'server.js'                         
}, 

，然后在launch.json中将父目录设置为"outdir":

and set the parent dir as 'outdir' in launch.json:

...
"sourceMaps": true,
"outDir": "${workspaceRoot}/dist/server",
"smartStep":true

要求webpack在webpack.config.json中输出sourcemap的绝对路径

Ask webpack to output absolute path for sourcemap in webpack.config.json

output : {
...
devtoolModuleFilenameTemplate        : '[absolute-resource-path]',
devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
}

这篇关于使用Visual Studio Code调试Webpack捆绑的节点ts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！