Typescript 源映射在 vscode 中不起作用

2024-01-05

我有一个项目分为两部分。
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 中调试时,断点未正确启用。我不想将整个打字稿应用程序复制到网络应用程序中,以避免编辑错误的文件。

我尝试更改 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"
    }
}

Thanks


谢谢@Aviad Hadad 指出我走上了正确的道路。

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

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

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")
    });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Typescript 源映射在 vscode 中不起作用 的相关文章

随机推荐