Source Maps介绍

最新推荐文章于 2024-06-10 22:10:41 发布

hsany330

最新推荐文章于 2024-06-10 22:10:41 发布

阅读量6k

点赞数 1

结合并压缩你的JavaScript和CSS文件能够让你的网站更加优秀。但是，当你需要调试这些压缩文件中的代码就会变成一个噩梦。不要害怕，我们可以通过Source Maps解决这个问题。

Source Maps能够提供将压缩文件恢复到源文件原始位置的映射代码的方式。这意味着你可以在优化压缩代码后轻松的进行调试。在Chrome和Firefox的开发工具既附带内置的Source Maps的支持。

在这篇博客你要学习的源地图是如何工作的，并看看如何生成它们。我们打算将主要介绍JavaScript代码的Source Maps，但原理也适用于CSS的源映射了。

注：在Firefox的开发者工具默认启用了Source Maps。您可能需要在Chrome手动启用的支持。要做到这一点，需要打开Chrome开发工具，打开设置面板（COG在右下角）。在常规选项卡上，确保启用JSSource Maps和启用CSSSource Maps都打勾。

Source Maps工作原理

正如其名，一个Source Maps包括一大堆的信息，可用于将代码映射中的压缩文件恢复到它的原始来源。您可以指定一个不同的源映射为每个压缩文件中。

您可通过添加特殊的注释到您优化文件底部来指定Source Maps。

 
         1 
       
        //</code><code>#</code><code>sourceMappingURL = /</code><code>path</code><code>/</code><code>to</code><code>/script.js.map

该注释将通常由用于生成Source Maps的工具加入。开发者工具将只加载这个文件，那么支持Source Maps的工具就会识别。

您也可以可通过发送的X-SourceMap HTTP标头中的压缩JavaScript文件的Rsponse 来指定 SOurce Maps。

Source Maps文件包含有关地图本身和原JavaScript文件信息的JSON对象。下面是一个简单的例子：

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
         10 
       
         11 
       
         12 
       
        { 
       
        version 
        : 
          
        3 
        , 
       
        file 
        : 
          
        "script.js.map" 
        , 
       
        sources 
        : 
          
        [ 
       
        "app.js" 
        , 
       
        "content.js" 
        , 
       
        "widget.js" 
       
        ] 
        , 
       
        sourceRoot 
        : 
          
        "/" 
        , 
       
        names 
        : 
          
        [ 
        "slideUp" 
        , 
          
        "slideDown" 
        , 
          
        "save" 
        ] 
        , 
       
        mappings 
        : 
          
        "AAA0B,kBAAhBA,QAAOC,SACjBD,OAAOC,OAAO..." 
       
        }

让我们来仔细看看这些属性。

§ version -该属性指示遵守哪个版本的源映射规范文件。

§ file -源映射文件的名称。

§ source -原始源文件的URL的数组。

§ sourceRoot – （可选），所有在该文件的URL，源阵列将被分解成。

§ names -包含所有从源文件的变量和函数名的数组。

§ mappings -一个字符串中的Base64 VLQs含有实际的代码映射。（这是奇迹发生的地方。）

生成Source Maps与UgilfyJS

UglifyJS是一种流行的命令行实用程序，允许你合并和压缩JavaScript文件。版本2支持许多命令行标志，帮助生成Source Maps。

§ –source-map -为Source Maps的输出文件。

§ –source-map-root – （可选）该填充sourceRoot在映射文件属性。

§ –source-map-url – （可选）的路径到你的服务器上的Soutrce Maps。这将是放在优化文件中的注释中使用。//# sourceMappingURL=/path/to/script.js.map

§ –in-source-map- （可选）输入源映射。如果压缩的已经从其他地方的源文件生成的JavaScript文件，这很有用。想JavaScript库。

§ –prefix或--P – （可选）删除n目录的数量从出现在文件路径source的属性。例如，-P 3将忽略三目录的文件路径，所以one/two/three/file.js将成为file.js。使用-P相对将使UglifyJS找出源图和原始档案为你们之间的相对路径。

下面是一个使用一些命令行标志的一个示例命令。

 
   
 
 
  
         1 
       
 
        uglifyjs 
          
        [ 
        input  
        files 
        ] 
          
        - 
        o 
          
        script 
        . 
        min 
        . 
        js 
          
        -- 
        source 
        - 
        map  
        script 
        . 
        js 
        . 
        map 
          
        -- 
        source 
        - 
        map 
        - 
        root  
        http 
        : 
        //example.com/js -c -m 
       
 
 