浏览中ts文件的空内容

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": "(...)"
}

sources好文件ts 的点数列表:

我盯着Chrome/Chrome Canary中的项目(有/没有调试 - 效果相同).然后去源(F12 - > Sources).我看到文件script/app.ts,并script/boot.ts为空:

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

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

也许你知道什么是错的？我认为这个问题造成另一个问题:我无法调试..

Answer 1

问题是浏览器找不到映射文件中引用的源文件.

该sourceRoot选项可帮助您指定sources文件夹.

我在调试模式下使用"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

如果您使用的是Chrome，但不.ts随文件一起提供原始文件.js，则可以将Chrome指向一个文件夹，该文件夹中保留了原始源文件，而无需修改服务器的配置。

1. 打开开发工具，然后导航到“ 源”选项卡。
2. 确保FS树已展开（单击 按钮，如果没有的话）。
3. 右键单击树面板中的任意位置，然后选择将文件夹添加到工作区。
4. 选择.ts源所在的文件夹。
5. 安全确认栏将出现在主视口中，接受它。