SourceMap源码映射详细讲解

前端工程打包后代码会跟项目源码不一致，当代码运行出错时控制台上定位出错代码的位置跟项目源码上不对应。这时候我们很难定位错误代码的位置。SourceMap的用途是可以将转换后的代码映射回源码，如果设置了js文件对应的map资源，那么就可以在控制台进行调试时直接定位到源码位置。

前端的构建工具很多，文章只举例两个常用的：vite和webpack

在vite在文档介绍中可以看到直接设置build.sourcemap配置即可。

sourcemap可配置的值类型为（boolean, ‘inline’, ‘hidden’）几种：

boolean: true | false 默认为false，不生成map文件。当设置成true时，会生成单独的map文件，并且在对应的bundle文件中生成相应注释指明map文件。

inline

将source map作为一个data url附加在输出文件中。

hidden

跟true类似，生成一个map文件，但是在bundle问价中并不会生成注释。

在webpack中也只需要通过设置devtool配置即可。值有以下多种：

eval

会生成被eval函数包裹的模块内容，其中添加了注释用来标识源文件位置（sourceURL用来指定文件名）

这种方式因为不需要生成map文件，所以很快，只需要提供对应的源文件地址就可以就进行映射。但是缺少了很多映射信息（行、列等），同时eval方法因为安全问题也不建议使用。

source-map

生成一个map文件，并在bundle文件中添加注释指向map文件。

cheap

跟source-map类似，不过生成的map文件不会生成源码的列信息（只会映射到源码的行）跟loader中的sourcemap。

通常在定义错误时，只需要关注到行就可以知道错误原因，列信息不是非常必要，这样在打包时也能更快。不过对于需要经过多loader处理的文件，由于不会生成loader相关的sourcemap，可能会导致映射信息不精确。

module

生成的sourcemap包含了loader相关的sourcemap信息。

inline

和vite的inline配置一样，直接将生成的map文件内容作为data url添加到bundle文件中，不单独生成一个map文件。

hidden

也和vite的hidden配置一样。

nosources

生成的map文件中不包含sourceContent字段（sourceContent和sources字段都可以映射源码），使得map文件体积可以更小。

除了上述几个外，webpack还支持组合方式，详情可以[文档中的devtool配置]https://www.webpackjs.com/configuration/devtool/#devtool

对于生成的map文件，我们需要解析工具将源代码跟sourcemap进行映射。

在目前的浏览器中大多都默认开启了sourcemap映射功能。

在浏览器中按F12进入到开发者工具可以看到：

如果js文件中有sourcemap注释，可以映射到源码中。

没有配置sourcemap时：

配置了sourcemap：

对于生产环境，为了安全一般都不会在浏览器中进行映射。但是为了能监控定位到错误，我们可以使用手动隐射的方式。

安装source-map

启动一个node服务用来接受错误信息并进行记录：

现在也有许多监控平台（例如sentry）可以实现源码映射，不需要我们手动映射。

使用webpack打包举例来看一个map文件里都有什么字段。