打字稿源映射在 vscode 中不起作用

Question

我有一個項目分為兩部分。
1.Typescript 項目被編譯為單個 javascript 文件。
2.ASP.NET Core 網站，使用 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 中調試時，它工作正常，我可以看到所有的打字稿文件。 但是，當我嘗試在 vscode 或 visualstudio2017 中調試時，斷點未正確啟用。 我不想將整個打字稿應用程序復制到 webapp 中以避免編輯錯誤的文件。

我嘗試更改 tsconfig 中的“outDir”，但是我這樣做 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

我遇到了同樣的問題。 但是當使用內聯源映射時它解決了。 也許它也可以和你一起工作。