简体繁体 English

如何生成Javascript源映射？

[英]How are Javascript source maps generated?

原文 2013-09-26 21:26:58 7 1 javascript/ google-closure-compiler/ source-maps

I have been hearing more and more about source maps and how you can generate them using the Closure compiler to provide all the debugging goodness you are used to in development after you have compiled and minimised your code. 我已经越来越多地了解源映射以及如何使用Closure编译器生成它们，以便在编译和最小化代码之后提供您在开发中习惯的所有调试优势。 Apparently there is also support for compiled-to-js languages like CoffeeScript. 显然，还支持像CoffeeScript这样的编译到js语言。

I find this incredibly cool! 我发现这非常酷！ (Kudos to everyone involved in making this possible) （感谢每个参与实现这一目标的人）

What I am interested in though is: 我感兴趣的是：

How is this achieved? 这是如何实现的？ (primary question) （主要问题）
Why is this useful (as opposed to just debugging in development mode)? 为什么这很有用（而不仅仅是在开发模式下调试）？ (secondary) （次级）

1 个解决方案

How is a Source Map Created? 源地图是如何创建的？

The Html5 Rocks site has a great tutorial on generating source maps and shows examples with Closure-compiler. Html5 Rocks站点有一个关于生成源映射的精彩教程，并使用Closure-compiler显示示例。 The commands for each tool will vary, but the output should be about the same. 每个工具的命令会有所不同，但输出应该大致相同。

Why Source Maps are Useful 为什么源地图很有用

Tools which compress, compile, optimize or generate JavaScript invariably introduce errors. 压缩，编译，优化或生成JavaScript的工具总是会引入错误。 These errors often are not present in the development (uncompressed - raw code) environment. 这些错误通常不存在于开发（未压缩 - 原始代码）环境中。 However debugging compressed code is unbelievably painful. 然而，调试压缩代码令人难以置信的痛苦。

Source maps make the compressed/mangled code map to the original so that you appear to be stepping through the original code. 源映射使压缩/损坏的代码映射到原始代码，以便您看起来正在逐步执行原始代码。 Thus when an error occurs you know right where the problem lies. 因此，当发生错误时，您就知道问题所在。