使用 Visual Studio Code 调试 webpack 捆绑节点 ts

Posted 2023-02-22

【中文标题】使用 Visual Studio Code 调试 webpack 捆绑节点 ts

【英文标题】：Debug webpack bundled node ts with Visual Studio Code

【发布时间】：2016-07-28 00:37:12

【问题描述】：

（在某种程度上与 to this 相关但更具体到 VsCode）

我正在尝试使用 Visual Studio 代码调试 the AngularU starter kit。 但它正在将 单个 bundle.js 与侧面 bundle.js.map 中的 ts 输出合并：

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

当我尝试运行它时，我从 VS UI 收到一个错误：

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

当输出文件未合并时，

outDir 在我的其他项目（不使用 webpack）上工作正常，但在这里它没有帮助。很确定他正在寻找 server.js（但只有一个 bundle.js 及其映射文件）。

生成的单个文件输出是否有任何 outFile 选项？

我的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（而不是 bundle .*)，但不幸的是断点不起作用：

Here is the content of the server.js.map file.

TS 编译器和 Webpack 都配置为根据 this tutorial 创建 sourcemap。

我错过了什么吗？

EDIT2：断点的问题似乎是地图文件中的源 URI。

当我打开这个

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

进入这个

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

断点正在工作。

【问题讨论】：

我也很想知道你是如何解决这个问题的。目前正在尝试弄清楚如何仅调试 Webpack'd 和使用 TypeScript 的非节点 JS :( 如果您以某种方式解决，请告诉我！我也会这样做

@MarkPieszak 我很接近让它工作，唯一缺少的是能够使用 webpack 更新 sourceRoot：github.com/webpack/webpack/issues/238#issuecomment-207065290

【参考方案1】：

这是我如何使它工作的：

至少有 1.1.0 的 VsCode（老年人会在 sourceRoot 上遇到困难）

在 webpack.config.js 中设置 bundle 文件与其父目录同名

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

并在launch.json中将父目录设置为'outdir'：

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

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

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

【讨论】：

截至 2017 年 4 月，对于 webpack 2.4.1 和 TypeScript 2.1.5，这仍然是必要的。在我阅读此评论之前，我浪费了一个小时试图弄清楚这一点。谢谢！

这个解决方案对我有用，outDir 现在已被弃用并被 outFiles 取代，但很容易修补。

谢谢。我也为此浪费了几个小时。

这让我如此接近，但没有奏效。我读过this documentation，它说 outFiles 属性是一个 glob 模式数组。在我的路径末尾添加一个“*”使其工作 - 即使文件夹和文件名不匹配！

在vscode 1.37.0测试过，看来我们不需要再让bundle文件名和入口文件名一样了。