摘要

本教程将介绍如何在JavaScript中使用源映射（.map文件）。

内容

最近，我注意到一些JavaScript库（如Angular）随附了一个以.js.map为扩展名的文件，这引发了几个问题：

• 这是用来做什么的？为什么Angular团队要提供一个.js.map文件？
• 作为JavaScript开发人员，我应该如何使用angular.min.js.map文件？
• 我需要关心为我的JavaScript应用程序创建.js.map文件吗？
• 它是如何创建的？我查看了angular.min.js.map文件，发现其中充满了奇怪格式的字符串，所以我认为它不是手动创建的。

件下面是最终被大家认可的答案： 源映射（source maps）文件适用于已被压缩的JavaScript和CSS（现在也适用于TypeScript）文件。当你将一个文件进行压缩（例如angular.js文件），它会将数千行的易读代码变为只有几行的难以理解的代码。在将代码部署到生产环境时，最好使用压缩后的代码而不是完整的、未压缩的版本。在应用程序处于生产环境并出现错误时，源映射文件将帮助你查看原始版本的代码。如果没有源映射文件，任何错误信息看起来都会晦涩难懂。

对CSS文件也是一样的。一旦将Sass或Less文件编译为CSS，它看起来完全不同于原始形式。如果启用源映射，你就可以查看文件的原始状态，而不是修改后的状态。

因此，按照先后顺序回答你的问题：

• 源映射文件的作用是解析压缩后的代码。
• 作为开发人员，你可以在调试生产环境的应用程序时使用它。在开发模式下，你可以使用完整版本的Angular，而在生产环境中，你将使用压缩版本。
• 如果你希望更容易地调试生产代码，那么是的，你应该关心创建js.map文件。
• 它是在构建时由构建工具生成的。有一些构建工具可以像处理其他文件一样处理.js.map文件。

希望这有所帮助。

参考答案：

只关注最后一个问题：如何创建源映射文件。下面是一些可以生成源映射的构建工具：

• Grunt，使用插件：grunt-contrib-uglify
• Gulp，使用插件：gulp-uglify
• Google Closure，使用参数：--create_source_map

参考答案：

源映射文件（source map files）将混淆（压缩）后的文件映射为未混淆（未压缩）的文件。如果在未混淆文件中进行了更改，这些更改将自动应用到混淆后的文件中。

参考答案：

开发者可以按照以下步骤使用源映射文件：

1. 不要在index.html文件中链接.js.map文件（没有必要）。

2. 当使用好的混淆工具时，被混淆的.js文件会添加一条注释：

   //# sourceMappingURL=yourFileName.min.js.map

   该注释将连接你的.map文件。

3. 在Chrome浏览器中，打开开发者工具，切换到"Sources"选项卡。你会看到"sources"文件夹，其中包含未混淆的应用程序文件。

希望这对你有帮助！