browserify压缩合并源码反编译

Posted 2020-08-09 海角在眼前

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

前言

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

function e(t, n, r) {
    function s(o, u) {
        if (!n[o]) {
            if (!t[o]) {
                var a = typeof require == "function" && require;
                if (!u && 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" && require;
    for (var o = 0; o < r.length; o++) s(r[o]);
    return s
}

目录结构解析

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

分析方法：

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<ps.length;i++){
               if(!begin[ps[i]]){
                    begin[ps[i]] = (i == ps.length-1)? \'.js\':{};
               }    
               begin = begin[ps[i]];         
          }
     }
     console.log(paths);
}

调用地方：

(function e(t, n, r) {

     anlysePath(t, n, r);  //这里调用，后面代码就不重复了。
     function s(o, u) {
          if (!n[o]) {
               if (!t[o]) {
 

目录解析效果：

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

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

directive
filter
lib
module
service
unPopModal
_process.js
es6-promise.js
path.js

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

 

总结

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

 

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

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