有sourcemap文件,如何还原前端代码结构?
发布于 作者:苏南大叔 来源:程序如此灵动~苏南大叔对于这层出不穷的js
框架,特别的头大。在原始时代,看懂一大段js
代码是一件非常有成就感的事情。但是,现在的js
代码,动不动就混淆,动不动就多个文件合并,动不动就掺杂css
文件。这使得阅读js
代码逻辑,变得异常困难!
但是!凡事都有例外,一些人在编译这些js
文件的时候,会不经意间带出sourcemap
文件,就是那些xxx.js.map
文件,或者xxx.css.map
文件。
这些文件一方面可以方便调试,另外一方面,还可以通过这些map
文件,还原原本的文件结构。这就是本文中要描述的主要内容。另外,由于webpack
在前端打包领域占据着不可动摇的地位。所以,本文的内容(测试用例vue
项目,默认启用的就是webpack
打包),其实也适用于还原webpack
打包后的结果。
本文测试环境:win10
,shuji@0.7.0
。
shuji
工具
在npmjs.com
一搜,有好多npm
可以安装的类库。但是,如果你仔细对比之后,就会觉得只有shuji
这个是最符合条件的,经过了大家的持续考验。
shuji
官方地址是:
看作者的名字paazmaya
,听起来是个日本程序员。主页上说shuji
是周氏
的意思。注意:周氏是中文。这个周氏来自琉球群岛,是个功夫大师。
不过这种代码,最大的特点是不用下载github
上面的源代码,直接通过npm install
安装是最方便的。
npm install -g shuji
查看shuji
的版本:
shuji -V
查看shuji
的更多参数:
shuji -h
测试用例及改造
为了进行验证,这里使用了@vue/cli
生成的vue3
的默认demo
。如何使用vue-cli
并不是本文的重点,所以这里一笔带过。唯一值得说明的是:@vue/cli
默认生成hello-world
的例子,默认并不开启css
的sourcemap
。
为了本文内容的完整,苏南大叔配置了vue.config.js
,使其build
的时候,能够生成css
的sourcemap
。配置如下:vue.config.js
:
module.exports = {
css: {
sourceMap: true
}
};
然后执行build
命令,来生成相关实验用的dist
目录。
.js.map
文件还原结果
观察dist
目录,一共有两个.js.map
文件。分别执行shuji
命令:
shuji app.6469473c.js.map -o app
shuji chunk-vendors.ef00857a.js.map -o vendor
可以得到的文件结构如下:
虽然目录结构有误,但是,所有文件都还原出来了,并且内部代码一模一样。
app.6469473c.js.map
还原的代码是:原版的src
目录,加上原型为webpack
的bootstrap
文件。chunk-vendors.ef00857a.js.map
还原到的代码是:各种js
类库文件。
.css.map
文件还原结果
对app.9f49967a.css.map
进行一下还原,看看会得到什么结果。命令行如下:
shuji app.9f49967a.css.map -o app
结果得到了两个vue
文件,并没有得到源码中的main.js
和logo.png
文件。不过,主要的vue
文件得到了,也是相当不错的结果。
相关链接
总结
这款软件有效的解决了webpack
类工具合并代码后的可读性严重降低的问题,对于阅读别人的代码是比较有帮助的。还原后的文件结构虽然和原本的结构不一样,只需要稍作调整即可。
更多sourcemap
相关文章,欢迎查看苏南大叔的博客:
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。