什么是 TypeScript Map 文件?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17493738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-11 01:06:26  来源:igfitidea点击:

What is a TypeScript Map file?

typescript

提问by Sachin Kainth

I have seen .mapfiles for TypeScript. What I want to know is what these files are for. Do they contain references to other files referenced in the .ts file?

我已经看到.map了 TypeScript 的文件。我想知道的是这些文件的用途。它们是否包含对 .ts 文件中引用的其他文件的引用?

回答by Ryan Cavanaugh

.map files are source map files that let tools map between the emitted JavaScript code and the TypeScript source files that created it. Many debuggers (e.g. Visual Studio or Chrome's dev tools) can consume these files so you can debug the TypeScript file instead of the JavaScript file.

.map 文件是源映射文件,可让工具在发出的 JavaScript 代码和创建它的 TypeScript 源文件之间进行映射。许多调试器(例如 Visual Studio 或 Chrome 的开发工具)可以使用这些文件,因此您可以调试 TypeScript 文件而不是 JavaScript 文件。

This is the same source map format being produced by some minifiers and other compiled-to-JS languages like CoffeeScript.

这与一些压缩器和其他编译为 JS 的语言(如CoffeeScript )生成的源映射格式相同。

回答by Chris Halcrow

A source map is basically what it says, a map from one language to another, so the debugger can run the JavaScript code but show you the line that actually generated it.

源映射基本上就是它所说的,从一种语言到另一种语言的映射,因此调试器可以运行 JavaScript 代码,但会向您显示实际生成它的行。

For practical debugging purposes:

出于实际调试目的:

What the source map lets you do is set a breakpoint on the TypeScriptfile and then debug the code. This can be done in Chrome and Firefox. Somewhat confusingly, the debugger behaviour in Chrome is that when the breakpoint is reached, the '.js' file is actually shown (stopped at the breakpoint).

源映射允许您在TypeScript文件上设置断点,然后调试代码。这可以在 Chrome 和 Firefox 中完成。有点令人困惑的是,Chrome 中的调试器行为是,当到达断点时,实际上会显示 '.js' 文件(在断点处停止)。

As of today, the Firefox debugger will display the actual TypeScript file when it breaks. See the below reference:

从今天起,Firefox 调试器将在中断时显示实际的 TypeScript 文件。请参阅以下参考:

http://www.gamefromscratch.com/post/2014/05/27/TypeScript-debugging-in-Visual-Studio-with-IE-Chrome-and-Firefox-using-Source-Maps.aspx)

http://www.gamefromscratch.com/post/2014/05/27/TypeScript-debugging-in-Visual-Studio-with-IE-Chrome-and-Firefox-using-Source-Maps.aspx

(this also shows how Visual Studio can be configured to create the source map)

(这也显示了如何配置 Visual Studio 来创建源映射)

To understand how a source map works, you can read the section 'The anatomy of a source map' here:

要了解源映射的工作原理,您可以在此处阅读“源映射的剖析”部分:

https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/