我如何理解 js.map 文件中的所有这些垃圾？

Question

我知道成为一名优秀的编码员并不重要，但我很好奇是否有人知道并可以解释 .js.map 文件中发生的事情。

例如，对于这个简单的 .ts 文件，

import {bootstrap}    from 'angular2/platform/browser';
import {enableProdMode}    from 'angular2/core';
import {AppComponent} from './app.component';
import {HTTP_PROVIDERS} from 'angular2/http';
import {JSONP_PROVIDERS} from 'angular2/http';

enableProdMode();
bootstrap(AppComponent, [HTTP_PROVIDERS, JSONP_PROVIDERS]);

编译成 js 后我得到这个 .js.map 文件

{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;YAMA,qBAAc,EAAE,CAAC;YACjB,mBAAS,CAAC,4BAAY,EAAE,CAAC,qBAAc,EAAE,sBAAe,CAAC,CAAC,CAAC"}

为什么？

Answer 1

Why

这些是源映射文件。它们允许您在转译之前调试 原始代码。

资源

查看 sourcemap 可视化工具：https://sokra.github.io/source-map-visualization/

以及有关 sourcemaps 的更多详细信息：http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

我如何理解 js.map 文件中的所有这些垃圾？

How can I understand all this rubbish in js.map files?

javascript

transpiler

typescript

资源