create-react-app restore sourcemap

前言

最近恍恍惚惚， 独立完成前后端的情况下又要自己提Merge Request到分之进行review， 大家知道，前后端分离的情况下， 其实前端只需要把每个功能完成后, 进行build， 然后将生成的目录copy到web服务上就可以了， 这也导致了我这一周都没有提前端的代码到gitlab上， 一次偶然的瞬间我发现合并的时候发生了冲突， 但是改动又不大， 这时候我就通过reset hard进行恢复我上一次提交的commitId上， 但是我忽略了， 前端的代码也恢复了。。。 尼玛。。 我前端代码没提交， 这时候就丢了一周的前端代码！！！！

思路排查

好在线上有latest的前端build生成的目录， 所以我当时也不是很慌(那是不可能的), 唯一的突破口就是从build里面找源文件， 但是我发现全是压缩后的， 而且一个文件密密麻麻的JS，完全没法入手， 这时候我就尝试在stackoverflow寻找答案， 因为build后都是把源文件进行压缩了， 既然能编译, 那么一定可以反编译呀！所以我找到了我的就行 source map, 还好react脚手架默认是开source map参数的，这样我就有旧了, 目录是在build/static/js/*.map, 这是js的文件， 有了这个我们就可以往下说了。

恢复源文件

• 尝试找到能恢复源文件的工具
• 进行源文件修复
• 尝试review

找到了一个Python项目， 刚好就是我们需要的工具，通过source map进行反编译生成源文件；
地址如下:地址
有了他我们就可以做一些事情了， 用法如下

pip install -r requirements.txt

# --local参数跟随你build目录下的sourcemap文件， output是输出到哪里， output这个目录必须的存在！ 自己创建就好， 名字随意
./unwebpack_sourcemap.py --local ~/kingsoft/finish/build/static/js/*.map output

其他

还有一个问题， create-react-app默认生成sourcemap是你build一次他就会在build/static/js/*.map， 也就是说每一次.map的js文件就是你build一次， 所以别批量倒入， 一个个找看看你最后一次build的项目是哪个map文件！