如果拿到了一份带有 source map 的 JavaScript 代码,那么理论上就可以通过这份 source map 去尽可能的还原出原始的文件内容。
首先,source map 本质上是一个 JSON 文件。在其中,sourceContent
数组就记录了所有源文件的纯文本内容,而这些文件的文件路径及文件名则存放在了 sources
数组中。两者相互对应,理论上来说参照这两者的数据,就可以将源文件还原到原始的目录下。
然而,Webpack 的打包结果,文件的路径名称都带上了 webpack:///
的前缀。在实际处理的过程中,可以直接使用已有的库,比如 restore-source-tree
。
这个库因为已经比较老了,对 Webpack 3/4 等新版本的支持存在问题。在原库合并 PR 之前,可以先使用改进过的版本 restore-source-tree
。
这个修改过的版本,除了修复对新版 Webpack 编译结果的支持外,也加入了 glob 的支持,可以更方便的进行批量 source map 还原。
参考代码如下:
restore-source-tree -o output_folder path/to/source-maps/*.map
最终生成的文件会存放在 output_folder 下。