Question

我在ASP.NET-Core中创建了一个项目。已配置项目，文件夹wwwroot仅包含*.html, *.css, *.js等本地文件。扩展名为*.ts的文件位于其他文件夹名称scripts中。所有看起来像：

tsconfig.json 的设置：

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../wwwroot/appScripts/",
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"    
  ]
}

一切都很好编译。如您所见：属性 sourceMap （在tsconfig.json中）的值为 true ，在每个*.js的末尾（由**。ts创建） *）添加了sourceMapping：

app.js.map ：

{
  "version": 3,
  "file": "app.js",
  "sourceRoot": "",
  "sources": [
    "../../scripts/app.ts"
  ],
  "names": [
    "AppComponent",
    "AppComponent.constructor"
  ],
  "mappings": "(...)"
}

好文件ts的sources点列表：

我在Chrome / Chrome Canary中观察了这个项目（有/没有调试 - 效果相同）。然后转到源（ F12 - ＆gt; Sources ）。我看到文件script/app.ts和script/boot.ts为空：

当我尝试在IE11中打开script/app.ts时，我收到错误：

Could not locate http://localhost:61272/appScripts/../../scripts/app.ts specified in source map http://localhost:61272/appScripts/app.js.map.

也许你知道什么是错的？ 我认为这个问题会产生另一个问题：我无法调试..

Answer 1

问题是浏览器找不到地图文件中引用的源文件。

sourceRoot选项可以帮助您指定来源文件夹。

我在调试模式下使用“inlineSourceMap”和“inlineSources”选项来克服“源路径地狱”。

更新1

示例最小的tsconfig.json文件以生成内联源映射：

{
  "compilerOptions": {
    "target": "es5",
    "inlineSourceMap": true,
    "inlineSources": true
  },
  "exclude": [
    "node_modules"    
  ]
}

你会得到像

这样的东西

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLmpz...

输出“.js”文件中的

。

但请注意Visual Studio 2015在某些情况下忽略tsconfig.json文件（例如Visual Studio 2015 - tsconfig.json - TypeScript 1.6.0 Beta）

为了让它通过VS工作，我在构建后步骤中添加了“tsc”。为了使文件得到遵守，我构建了项目。

但是对于制作我建议你使用Grunt或Gulp构建任务，或者Webpack。

Answer 2

我看到的问题是，在wwwroot目录中，您只提供并部署了.js和.map个文件。问题是.map文件的另一个难题是.ts文件本身。

我在显示空白.ts文件时遇到了同样的问题。出于调试目的，您应该有tsconfig.json或任务运行器（即gulp.js）复制不仅已转换的.js文件而且{{1}文件。我写了一篇博客文章，详细说明了ASP.NET核心站点中所需的全面步骤，以确保在需要更深入解释时发生这种情况：

Ensuring TypeScript Files Are Served to the Browser for Debugging Using ASP.NET Core

Answer 3

如果您使用Chrome而不是原始.ts文件以及.js文件，则可以将Chrome指向保存原始源文件的文件夹，而无需修改服务器配置。

打开开发工具并导航至来源标签。
确保展开FS树（如果没有，请点击左上角的按钮）。
右键单击树面板中的任意位置，然后选择将文件夹添加到工作区。
选择.ts来源所在的文件夹。
安全确认栏将显示在主视口中，接受它。

Answer 4

我通过在IIS 10中添加.ts text/plain作为MIME类型来解决此问题。

这是我tsconfig.json的相关部分：

{
  "compilerOptions": {
    ...
    "outFile": "scripts/app.js",
    "sourceMap": true,
    ...
  }
  ...
}

这也“奏效”，但与缩小的效果并不相符：

"inlineSourceMap": true,
"inlineSources": true

我宁愿将.map文件作为单独的文件

浏览中ts文件的空内容

4 个答案:

更新1