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

Question

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

我正在尝试调试 the AngularU starter kit使用 Visual Studio Code 。但是它将 ts 输出合并到一个带有侧面 bundle.js.map 的 bundle.js 中:

↳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",

断点正在工作。

Answer 1

我是这样实现的:

1. 拥有至少 1.1.0 的 VsCode(年长的人会与 sourceRoot 斗争)

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

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

3. 并在 launch.json 中将父目录设置为“outdir”:

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

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

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