使用Visual Studio代码

时间:2016-04-07 08:41:49

标签: typescript angular webpack visual-studio-code

(在某种程度上与to this 相关,但更具体针对VsCode

我正在尝试使用visual studio代码调试the AngularU starter kit。 但它将单个bundle.js中的ts输出与side.js.map 合并:

↳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 (而不是捆绑包)时,它会运行。*),但遗憾的是断点不起作用:

breakpoint shown as not found

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

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

我错过了什么吗?

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

当我转过来

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

进入这个

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

断点正在发挥作用。

1 个答案:

答案 0 :(得分:16)

以下是我如何使其发挥作用:

  1. VsCode至少为1.1.0(较旧的将与sourceRoot相悖)

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

    output: {
    path: path.join(__dirname, 'dist', 'server'),    
    filename: 'server.js'                         
    }, 
    
  3. 并将父目录设置为' outdir'在launch.json中:

    ...
    "sourceMaps": true,
    "outDir": "${workspaceRoot}/dist/server",
    "smartStep":true
    
  4. 要求webpack在webpack.config.json中输出sourcemap的绝对路径

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