javascript - 我如何理解 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

为什么

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

资源

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

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