Question

我有一个项目分为两部分 1.Typescript项目编译为单个javascript文件 2.ASP.NET核心网站，使用打字稿项目进行用户测试。

我正在使用typescript生成源图，这是我的tsconfig。

{
  "extends": "./../tsconfig.json",
  "compilerOptions": {
    "outFile": "build/app.js",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "es5",
    "module": "amd"
  },
  "include": [
    "app/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

文件以这种方式提供

    app.UseStaticFiles(new StaticFileOptions()
    {
        FileProvider = new PhysicalFileProvider(Directory.GetCurrentDirectory() + "/../typescriptapp/build"),
        RequestPath = new PathString("/typescriptapp")
    });

在chrome中调试时，它可以工作，我可以看到所有的typescripts文件。但是，当我尝试在vscode或visualstudio2017中调试时，断点未正确启用。我不希望将整个打字稿应用程序复制到webapp中，以避免编辑错误的文件。

我尝试更改＆＃34; outDir＆＃34;在tsconfig中，但我这样做Chrome调试无法正常工作，因为它在localhost中寻找完整路径：43345 \ typescriptapp \ C：\ typescriptapp \ app \ app.ts

在vscode和visualstudio2017中启用调试同时保持其在chrome中运行时我缺少什么？

更新21/03/2018 - 添加了launch.json

{
   "type": "chrome",
   "request": "launch",
   "name": "typescriptapp - chrome",
   "url": "http://localhost:5000",
   "webRoot": "${workspaceFolder}/webapp/wwwroot",
   "sourceMaps": true,
   "trace": true
},
{
    "name": "webapp",
    "type": "coreclr",
    "request": "launch",
    "preLaunchTask": "",
    "program": "${workspaceRoot}/webapp/bin/Debug/netcoreapp2.0/webapp.dll",
    "args": [],
    "cwd": "${workspaceRoot}/webapp",
    "stopAtEntry": false,
    "launchBrowser": {
        "enabled": true,
        "args": "${auto-detect-url}",
        "windows": {
            "command": "cmd.exe",
            "args": "/C start ${auto-detect-url}"
        },
        "osx": {
            "command": "open"
        },
        "linux": {
            "command": "xdg-open"
        }
    },
    "env": {
        "ASPNETCORE_ENVIRONMENT": "Development"
    },
    "sourceFileMap": {
        "/Views": "${workspaceRoot}/webapp/Views"
    }
}

由于

Answer 1

谢谢@Aviad Hadad指出我走在正确的轨道上。

我尝试将vscode启动设置更改为 "webRoot": "${workspaceFolder}\..\typescriptapp\build"并且可以调试我的打字稿项目。但是我无法以这种方式调试wepapp文件。

我的解决方案是保留这个"webRoot":"${workspaceFolder}/webapp/wwwroot"，但我在构建过程中添加了一个步骤，在我的webapp中第二次编译我的项目。

tsc -p '.\typescriptapp\tsconfig.json' --outFile .\webapp\wwwroot\js\typescriptapp\typescriptapp.js;

这样，源映射就可以正确映射到vscode。我不得不更改一些静态文件，以便它可以使用chrome。

  app.UseStaticFiles(new StaticFileOptions()
    {
        FileProvider = new PhysicalFileProvider(Directory.GetCurrentDirectory() + "/../typescriptapp"),
        RequestPath = new PathString("/typescriptapp")
    });

Answer 2

我遇到了同样的问题。但是当使用内联源映射时它解决了。也许它也适用于您。

打字稿源图在vscode中不起作用

2 个答案: