browserify压缩合并源码反编译

最近在学习钉钉（一个协作应用）桌面应用的前端源码时候，发现其js源码是用browserify做模块开发。于是想还原其源码的原本的目录结构，学习它的目录分类以及业务划分。

<span ;style="font-size: ;14pt;">前言</span>

用过browserify构建工具的应该清楚，在压缩合并后的代码的最前面，有处理模块依赖关系的代码：

; ;<pre>function ;e(t, ;n, ;r) ;{

; ; ; ;function ;s(o, ;u) ;{

; ; ; ; ; ; ; ;if ;(!n[o]) ;{

; ; ; ; ; ; ; ; ; ; ; ;if ;(!t[o]) ;{

; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;var ;a ;= ;typeof ;require ;== ;"function" ;&amp;&amp; ;require;

; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if ;(!u ;&amp;&amp; ;a) ;return ;a(o, ;!0);

; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if ;(i) ;return ;i(o, ;!0);

; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;var ;f ;= ;new ;Error("Cannot ;find ;module ;'" ;+ ;o ;+ ;"'");

; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;throw ;f.code ;= ;"MODULE_NOT_FOUND",

; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;f

; ; ; ; ; ; ; ; ; ; ; ;}

; ; ; ; ; ; ; ; ; ; ; ;var ;l ;= ;n[o] ;= ;{

; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;exports: ;{}

; ; ; ; ; ; ; ; ; ; ; ;};

; ; ; ; ; ; ; ; ; ; ; ;t[o][0].call(l.exports,

; ; ; ; ; ; ; ; ; ; ; ;function(e) ;{

; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;var ;n ;= ;t[o][1][e];

; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;return ;s(n ;? ;n: ;e)

; ; ; ; ; ; ; ; ; ; ; ;},

; ; ; ; ; ; ; ; ; ; ; ;l, ;l.exports, ;e, ;t, ;n, ;r)

; ; ; ; ; ; ; ;}

; ; ; ; ; ; ; ;return ;n[o].exports

; ; ; ;}

; ; ; ;var ;i ;= ;typeof ;require ;== ;"function" ;&amp;&amp; ;require;

; ; ; ;for ;(var ;o ;= ;0; ;o ;&lt; ;r.length; ;o++) ;s(r[o]);

; ; ; ;return ;s

}</pre> ; ;

<span ;style="font-size: ;14pt;">目录结构解析</span>

我写了一个处理的方法，在browserify处理依赖关系地方调用。

分析方法：

; ;<pre>function ;anlysePath(t, ;n, ;r){

; ; ; ; ;var ;temp ;= ;{};

; ; ; ; ;//收集所有地址

; ; ; ; ;for(var ;tk ;in ;t){

; ; ; ; ; ; ; ; ; ;var ;xx ;= ;t[tk][1];

; ; ; ; ; ; ; ; ; ;for(var ;x ;in ;xx){

; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if(!temp[tk]) ;temp[tk] ;= ;{};

; ; ; ; ; ; ; ; ; ; ; ; ; ; ;temp[tk][xx[x]] ;= ;x; ; ; ; ; ; ; ; ; ;

; ; ; ; ; ; ; ; ; ;}

; ; ; ; ;}

; ; ; ; ;//解析依赖关系

; ; ; ; ;var ;after ;= ;{};

; ; ; ; ;var ;doing ;= ;{};

; ; ; ; ;function ;anlyse(num, ;prefix){

; ; ; ; ; ; ; ; ; ;var ;al ;= ;temp[num];

; ; ; ; ; ; ; ; ; ;for(var ;n ;in ;al){

; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if(after[n]) ;continue;

; ; ; ; ; ; ; ; ; ; ; ; ; ; ;var ;data ;= ;al[n];

; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if(data.startsWith("./")) ;data ;= ;data.substring(2, ;al[n].length);

; ; ; ; ; ; ; ; ; ; ; ; ; ; ;var ;cj ;= ;data.match(/\.\.\//g);

; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if(cj) ;cj ;= ;cj.length ;+ ;1;

; ; ; ; ; ; ; ; ; ; ; ; ; ; ;else ;cj ;= ;1;

; ; ; ; ; ; ; ; ; ; ; ; ; ; ;var ;pf ;= ;prefix.split("/");

; ; ; ; ; ; ; ; ; ; ; ; ; ; ;pf.splice(pf.length ;- ;cj ;, ;cj);

; ; ; ; ; ; ; ; ; ; ; ; ; ; ;after[n] ;= ;pf.join("/")+ ;"/" ;+ ;data.replace(/\.\.\//g,"");

; ; ; ; ; ; ; ; ; ; ; ; ; ; ;after[n] ;= ;after[n].replace(/\.\.\//g,"");

; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if(after[n].startsWith("/")) ;after[n] ;= ;after[n].substring(1, ;after[n].length);

; ; ; ; ; ; ; ; ; ;}

; ; ; ; ; ; ; ; ; ;for(var ;n ;in ;al){

; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if(!doing[n]){

; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;doing[n] ;= ;true;

; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;anlyse(n, ;after[n]);

; ; ; ; ; ; ; ; ; ; ; ; ; ; ;} ; ; ; ; ; ; ; ; ; ; ; ; ; ;

; ; ; ; ; ; ; ; ; ;}

; ; ; ; ;}

; ; ; ; ;anlyse(r[0],'');

; ; ; ; ;var ;files ;= ;{};

; ; ; ; ;for(var ;k ;in ;after){

; ; ; ; ; ; ; ; ; ;files[after[k]] ;= ;k;

; ; ; ; ;}

; ; ; ; ;//合并目录，得出树形结果

; ; ; ; ;var ;paths ;= ;{};

; ; ; ; ;for(var ;k ;in ;files){

; ; ; ; ; ; ; ; ; ;var ;ps ;= ;k.split("/");

; ; ; ; ; ; ; ; ; ;if(!paths[ps[0]]) ;paths[ps[0]] ;= ;ps.length ;== ;1? ;".js":{};

; ; ; ; ; ; ; ; ; ;var ;begin ;= ;paths[ps[0]];

; ; ; ; ; ; ; ; ; ;for(var ;i=1;i&lt;ps.length;i++){

; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if(!begin[ps[i]]){

; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;begin[ps[i]] ;= ;(i ;== ;ps.length-1)? ;'.js':{};

; ; ; ; ; ; ; ; ; ; ; ; ; ; ;} ; ; ; ;

; ; ; ; ; ; ; ; ; ; ; ; ; ; ;begin ;= ;begin[ps[i]]; ; ; ; ; ; ; ; ; ;

; ; ; ; ; ; ; ; ; ;}

; ; ; ; ;}

; ; ; ; ;console.log(paths);

}</pre> ; ;

调用地方：

; ;<pre>(function ;e(t, ;n, ;r) ;{

; ; ; ; ;anlysePath(t, ;n, ;r); ; ;//这里调用，后面代码就不重复了。

; ; ; ; ;function ;s(o, ;u) ;{

; ; ; ; ; ; ; ; ; ;if ;(!n[o]) ;{

; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if ;(!t[o]) ;{

目录解析效果：

由于篇幅关系，没有显示所有目录结构。

可以看出第一层的目录结构是：

; ;<pre>directive

filter

lib

module

service

unPopModal

_process.js

es6-promise.jspath.js</pre> ; ;

PS：一个典型的AngularJS的目录结构。

<span ;style="font-size: ;14pt;">总结</span>

学习别人前端源码，我觉目录结构已经够用了，毕竟项目的骨架搭好了，其他的也就是添砖加瓦而已。

本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。

本文地址 ;：http://www.cnblogs.com/lovesong/p/5870344.html