Source map 文件还原为源码

使用过 vue 或 react 框架的都知道，项目上线时需要 npm run build 来把项目打包，打包的过程就是对源码解析、编译，最后生成纯静态 html 项目的过程。

当这个过程完成后，生成的最终静态项目，里面的代码已经是被编译压缩混淆过的，正常人无法阅读，甚至看一样都难受。

但同时，通过框架打包时的配置，每生成一个难以阅读的 js 或 css，都可以生成对应一个 map 格式的文件，它就是本文的重点 —— Sourct map 文件了。

每个 map 文件，其内部记录的是对应名称的 js、css 文件的源码映射，在我们开发时，浏览器展示页面，读取的也是编译过的 js 文件，但控制台一旦报错，我们点击错误提示中的报错文件，控制台会自动打开这个文件，只要启用了 Source map 功能，那展示的文件代码，就是我们编辑器中所看到，而不是编译过的一团糟的 js。

这个其实就是 Source map 的功能。

同时，我们只要能得到一个 Source map 文件，也可以像浏览器一样，还原出对应的源码文件，当然也是需要插件帮我们处理的。

我最近使用的插件，就是 reverse-sourcemap。

使用这个工具，可以让我们在得到 Source map 后，还原出源码目录结构和代码，方便我们研究其他网站功能实现的具体代码。

1. 全局安装插件

npm install -g reverse-sourcemap

2. 去目标网站下载 Source map 文件

现在复杂功能的网站，基本都会使用框架编译，如果没有使用框架，直接使用 jquery 开发，那可能连编译都没有，直接把网站拔下来就可以直接看了。

只要使用了类似 vue、react 的框架，那就需要打包，打包时，默认就会生成 Source map 文件，并且和其对应的 js、css 放在同一目录。

我们只需要打开控制台，切换到 Network/JS 页，然后刷新页面，就可以看到这一页用到的所有 js，然后可以看到这个 js 的文件路径，我们只需要在这个路径后面，再添加 .map，就是其对应的 Source map 文件的下载路径了，可以一个个下载保存。

比如 js 文件地址为： https://a.b.com/js/main.abcde.chunk.js。

那对应的 map 文件默认为：https://a.b.com/js/main.abcde.chunk.js.map。

而且，正常情况，每个编译后的 js、css 文件，在文件最后都会有一行类似 //# sourceMappingURL=main.8c7e88c7e.chunk.js.map 的代码，来标记这个文件的 Source map 的路径，浏览器也是解析这一行，找到对应的 map 文件，方便开发者调试的。

当然，如果这个目标网站的技术比较机灵，可能会把 Source map 文件改一下存放位置、或者改名，并去掉 js 文件中 map 文件的相对路径，这样按照上面的方式，就比较难找了，更有可能的，对方可能直接改一下打包配置，打包时直接不生成 Source map 文件，这就一点办法也没有了。

总是，这一步需要搞到目标网站的 Source map 文件，主要是 js 文件，因为 css 只是样式，正常不会有人需要抄人家样式，主要是功能嘛。

3. 还原源码

最后一步就简单了，新建一个文件夹，名称自定，比如 page-source，然后把所有下载下来的 map 文件移动进去，接着打开终端，进入到此文件夹：

# 进入文件夹
cd page-source

# 使用已经全局安装的工具，把当前文件夹中的 map 文件进行还原，还原至当前的 ./source 文件夹内
reverse-sourcemap -o ./source ./

完成。

reverse-sourcemap 指令用法如下

reverse-sourcemap [options] <file|directory>

  -h, --help               帮助和使用说明
  -V, --version            版本号
  -v, --verbose            输出，将打印当前正在处理的文件
  -o, --output-dir String  还原后的文件的输出位置，默认当前目录： ./
  -M, --match String       用于匹配和过滤文件的正则表达式，默认： \.map$
  -r, --recursive          递归搜索匹配的文件，当 map 文件比较复杂包含文件夹层级时需要