SourceMap 使用教程

一、前言

在前端的工作中主要是用来解决以下三个方面出现的 debug 问题：

a. 代码压缩混淆后
  b. 利用 sass 、typeScript 等其他语言编译成 css 或 JS 后
  c. 利用 webpack 等打包工具进行多文件合并后

上面三种情况，我们在调试时都是没办法像调试源码般轻松，这就需要 SourceMap 帮助我们在控制台中转换成源码，从而进行 debug 。

二、概念

SourceMap 其实就是一个存储源代码与编译代码对应位置映射的信息文件

三、原理

实际上就是一个 JSON 键值对，利用 VLQ编码与特定的规则存储位置信息。
这里面的逻辑有兴趣的可以看看阮老师的这篇文章《 JavaScript Source Map 详解 》

{
　　　　version : 3,        // Source map的版本
　　　　file: "out.js",      // 转换后的文件名
　　　　sourceRoot : "",   // 转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空
　　　　sources: ["foo.js", "bar.js"],   // 转换前的文件。该项是一个数组，表示可能存在多个文件合并
　　　　names: ["src", "maps", "are", "fun"],   // 转换前的所有变量名和属性名
　　　　mappings: "AAgBC,SAAQ,CAAEA"  // 记录位置信息的字符串
}

其实不用懂原理直接使用就好，毕竟 .map 文件也是工具生成的，不用自己编写。

四、 webpack中的使用

在 webpack 中使用 source map，是通过配置中的 devtool 字段来设置source map类型。

webpakc中的source map关键字

eval：使用eval包裹块代码  
  source map：产生.map文件
  cheap：不包含列信息
  inline：将.map作为dataURL嵌入到js文件内部
  module：包含loder的sourcemap

webpakc中的source map类型

大概有26种类型，其实就是根据上面关键字的功能进行的排列组合，分别生成不同类型的Source Map，实际应用中可以根据需要进行配置。

开发环境一般推荐：

  • eval - 每个模块都使用 eval（) 执行，并且都有 //@ sourceURL。此选项会非常快地构建。主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source map），所以不能正确的显示行数。
  • *** eval-source-map - 每个模块使用 eval（) 执行，并且 source map 转换为 DataUrl 后添加到 eval（) 中。初始化 source map 时比较慢，但是会在重新构建时提供比较快的速度，并且生成实际的文件。行数能够正确映射，因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。
  • eval-cheap-source-map - 类似 eval-source-map，每个模块使用 eval（) 执行。这是 “cheap(低开销)” 的 source map，因为它没有生成列映射(column mapping)，只是映射行数。它会忽略源自 loader 的 source map，并且仅显示转译后的代码，就像 eval devtool。
  • eval-cheap-module-source-map - 类似 eval-cheap-source-map，并且，在这种情况下，源自 loader 的 source map 会得到更好的处理结果。然而loader source map 会被简化为每行一个映射(mapping)。

生产环境一般不推荐使用

实战

在webpack配置文件webpack.config.js中设置devtool即可生成Source Map文件：

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: "source-map"
};