requirejs加载文件带上md5版本号的解决方案

最新推荐文章于 2021-11-27 09:59:51 发布

liufeng520

最新推荐文章于 2021-11-27 09:59:51 发布

阅读量6k

点赞数

分类专栏： html5缓存

html5缓存专栏收录该内容

2 篇文章 0 订阅

订阅专栏

时间 2014-11-06 17:53:27 segmentfault-博客

原文 http://segmentfault.com/blog/paopao/1190000000761578

主题 RequireJS 加密解密 Gulp

最近团队其他项目组用到了requirejs（快过时的东西了，囧），因为项目过于庞大，因此缓存控制、文件版本号管理、增量更新这些问题都是需要解决的，而requirejs目前是无法解决这些的。由于我对前端构建工具有点研究，领导把这任务交给了我。

require.config 提供了urlArgs属性，用来添加版本号信息，但这东西是对所有文件生效，意味着只能全量更新，实在坑爹。而r.js只能用来打包合并文件，代码量还巨大，瞬间失去研究的兴趣。搜了一圈，国内外都没有谁提出过解决方案，没办法只能自己来了。真正动手处理这问题的时候才发现这问题确实麻烦。

因为r.js的局限性，而且超级难用，果断舍弃了，用的是自己最熟悉的gulp。最初的方案是通过 require.config 来处理， require.config 的 map 属性可以添加文件版号信息，类似这样：

require.config({
    map:{
        "*":{
            "xxx/yyy/zzz" : "app/xxx/yyy/zzz.js?v=r3r3s2s"
        }
    }
});

可以在读取文件后生成一个版本号信息映射再写回到config文件。搞完后感觉很ok，加载的脚本都能带md5戳了，以为版本号问题就此解决了。可是按依赖关系把文件合并后就悲剧了，程序都跑不起来了。走投无路的时候决定去翻一翻requirejs的源码，突然灵光一闪，想到了被弃用的urlArgs，坑爹的urlArgs。

在requirejs源码里搜索urlArgs，只有一处地方用到，源码如下：

return config.urlArgs ? url + ((url.indexOf('?') === -1 ? '?' : '&') +
                                     config.urlArgs) : url;

当时就想，如果 config.urlArgs 是一个 function 会怎样，自己动手改了一下，代码如下：

      if (!config.urlArgs) {
        return url;
      }

      if (typeof config.urlArgs === 'string') {
        return url + ((url.indexOf('?') === -1 ? '?' : '&') + config.urlArgs);
      }

      if (isFunction(config.urlArgs)) {
        var urlArgs;
        try {
          urlArgs = config.urlArgs.call(config, moduleName, url);
        } catch (e) {
          urlArgs = "";
        }

        return url + ((url.indexOf('?') === -1 ? '?' : '&') + urlArgs);
      }

config.urlArgs 对比原先的字符串，变成了一个方法，每次生成文件url的时候调用一下，在这个方法里返回文件对应的md5串（其他版本号信息也可以）。再通过gulp将文件版本号映射写到 require.config 里，问题就迎刃而解啦。

困扰一个星期的问题终于搞定了，人也轻松多了。后面果断给requirejs作者提了pull request，希望能被合并吧。

上面提到的只是requirejs的部分，还有很多工作需要gulp来完成，不多说，直接贴代码了。

var fs = require('fs');
var path = require('path');
var crypto = require('crypto');

var gulp = require('gulp');
var gutil = require('gulp-util');
var uglify = require('gulp-uglify');
var plumber = require('gulp-plumber');
var concat = require('gulp-concat');
var rename = require('gulp-rename');

var Q = require('q');
var through = require('through2');
var _ = require('underscore');

var opts = null;	//配置文件中require.config()的参数,会通过正则匹配出来,用来算文件路径

var diskBase;	   //当前业务模块的根目录

var confFile;	   //配置文件的路径+文件名

var aliaMap = {};   //别名配置

var depMap = {};	//依赖版本

var verMap = {};	//版本号配置 ，key:路径别名,value:文件md5值

var aliaPaths = []; //所有的别名路径集合，用来计算文件对应的别名路径

var conf = (function() {

  return {
    config:{
      fileset:["../config.js"],
      dest:"../dist"
    },
    js: {
      fileset: ["../**/*.js","!../build/","!../build/**/*.*","!../dist/","!../dist/**/*.*"],
      dest: "../dist"
    },
    html:{
      fileset:["../**/*.html","!../build/","!../build/**/*.*","!../dist/","!../dist/**/*.*"],
      dest:"../dist"
    }
  };

})();

var sepReg = new RegExp("\\" + path.sep, "g");

function tryEval(obj) {
  var json;
  try {
    json = eval('(' + obj + ')');
  } catch (err) {

  }
  return json;
}

//统一文件名的路径分割符，
function formatFileName(name) {
  return name.replace(/[\\\/]+/g, path.sep).replace(/^(\w)/, function (str,cd) {
    return cd.toUpperCase();
  });
}

//过滤掉依赖表里的关键字
function filterDepMap(depMap) {
  depMap = depMap.filter(function (dep) {
    return ["require", "exports", "module"].indexOf(dep) === -1;
  });

  return depMap.map(function(dep) {
    return dep.replace(/\.js$/,'');
  });
}

//根据文件名计算对应别名路径
function getAliaPath(file) {
  file = file.replace(sepReg, "/");

  //paths配置转成数组，按路径级数排序
  if (aliaPaths.length === 0) {
    for (var alia in opts.paths) {
      aliaPaths.push({
        alia:alia,
        path:opts.paths[alia]
      });
    }
    aliaPaths.sort(function(path1,path2) {
      return path2.path.split(/[\\\/]/).length - path1.path.split(/[\\\/]/).length;  
    });
  }

  //优先匹配路径级数多的
  for (var i = 0; i < aliaPaths.length; i++) {
    var aliaPath = aliaPaths[i];
    var fullPath = path.join(opts.baseUrl, aliaPath.path); 
    var pathReg = new RegExp('^.*?' + fullPath.replace(/\\/g, '/') + '(.*?)\.js$'); 
    var matches = file.match(pathReg);
    if (matches) {
      return aliaPath.alia + matches[1];
    }
  }

  //todo?
  return file.replace(diskBase.replace(sepReg, "/"), '').replace(/\.js$/, '');
}

//根据文件内容计算md5串
function getDataMd5(data) {
  return crypto.createHash('md5').update(data).digest('base64');
}

//根据文件名计算发布包对应该文件路径
function getDestFile(file) {
  try {
    var fileDirs = file.split(path.sep);
    fileDirs.shift();
    return formatFileName(_.unique(path.join(__dirname, conf.js.dest).split(path.sep).concat(fileDirs)).join(path.sep));
  } catch(e) {
    return null;
  }
}

//根据发布包文件计算原文件名路径
function getSrcFile(file) {
  file = formatFileName(file);
  var destPath = formatFileName(path.join(__dirname, conf.js.dest));
  var restPath = file.replace(/[\\\/]+/g, '/').replace(destPath.replace(/[\\\/]+/g, '/'), '').replace(/[\\\/]+/g,path.sep);
  //todo
  var fileName = formatFileName(path.join(__dirname, '../', restPath));

  return fileName;
}

gulp.task('makeOpts',function() {
  return gulp.src(conf.config.fileset)
    .pipe(through.obj(function(file,enc,cb) {
      var js = file.contents.toString();
      var name = formatFileName(file.path);
      confFile = name;

      var configMatches = js.match(/require(js)?\.config\s*?\(\s*?({[\s\S]*?})\s*?\)/);
      var options = configMatches[2];
      opts = tryEval(options);

      //todo 有点不靠谱
      var dirs = name.split(path.sep);
      var base = opts.baseUrl.split('/')[1];
      dirs.splice(dirs.indexOf(base))
      diskBase = dirs.join(path.sep);

      var aliaPath = getAliaPath(name);

      //提取依赖，用来合并
      js.replace(/\s*require(js)?\s*\(\s*(\[[^\]\[]*?\])/, function (str, suf,map) {
        var map = tryEval(map);
        depMap[aliaPath] = filterDepMap(map);
      });

      this.push(file);
      cb();
    }))
});

//遍历所有文件，生成依赖关系配置
gulp.task('makeDeps', ['makeOpts'], function () {
  return gulp.src(conf.js.fileset)
    //.pipe(uglify({
    //	mangle: {
    //		except: ['require', 'requirejs', 'exports']
    //	}
    //}))
    .pipe(through.obj(function (file, enc, cb) {
      var js = file.contents.toString();

      var name = formatFileName(file.path);

      var aliaPath = getAliaPath(name);

      aliaMap[aliaPath] = name;

      //todo 在这里把文件内容按规范修改掉？
      //提取依赖，用来合并
      js.replace(/;?\s*define\s*\(([^(]*),?\s*?function\s*\([^\)]*\)/, function (str, map) {

        var depStr = map.replace(/^[^\[]*(\[[^\]\[]*\]).*$/, "$1");

        if (/^\[/.test(depStr)) {
          var arr = tryEval(depStr);
          try {
            depMap[aliaPath] = filterDepMap(arr);
          } catch (e) {
            gutil.log("makeDeps Error: " + e);
          }
        }

      });

      this.push(file);
      cb();
    }))
    .pipe(through.obj(function (file, enc, cb) {
      var name = formatFileName(file.path);
      var aliaPath = getAliaPath(name);
      verMap[aliaPath] = getDataMd5(file.contents);

      this.push(file);
      cb();
    }))
    .pipe(gulp.dest(conf.js.dest));
});
var packPromises = [];

gulp.task('makePacks', ['makeDeps'], function () {

  //递归依赖关系，去重
  function makeDeps(deps) {
    var set = [];

    function make(deps) {
      deps.forEach(function (dep) {	  
        var currDeps = depMap[dep];		 //每个文件对应的依赖
        if (currDeps) {
          make(currDeps);
        }
        set.push(dep);
      });
    }

    make(deps);

    return _.unique(set);
  }

  var defineWithModuleNameReg = /;?\s*define\s*\(\s*["']/;
  var defineWithoutModuleNameReg = /(;?\s*define\s*)\(\s*([^,]*),/;

  for (var aliaPath in depMap) {
    var clearDepMap = makeDeps(depMap[aliaPath]);

    var fileMap = clearDepMap.map(function (dep) {
      return aliaMap[dep];
    });

    var destFile = aliaMap[aliaPath];
    fileMap.push(destFile);

    //修改原文件地址为生成发布包对应文件地址
    var destFileMap = fileMap.map(function (file) {
      return getDestFile(file);
    });

    (function (destFileMap) {
      var deferred = Q.defer();

      var destFile = _.last(destFileMap);
      var name = destFile.split(/[\\\/]+/).pop();
      var dir = destFile.replace(name, '');

      gulp.src(destFileMap)
        .pipe(through.obj(function (file, enc, cb) {
          var js = file.contents.toString();

          var name = getSrcFile(file.path);

          var aliaPath = getAliaPath(name);

          if (!defineWithModuleNameReg.test(js)){
            //添加模块名称   
            js = js.replace(defineWithoutModuleNameReg, function (str, def, mod) {
              return ';define("' + aliaPath + '",' + mod + ',';
            });

            file.contents = new Buffer(js);
          }

          this.push(file);
          cb();
        }))
        .pipe(concat(name))
        //.pipe(uglify({
        //	mangle: {
        //		except: ['require', 'requirejs', 'exports']
        //	}
        //}))
        .pipe(through.obj(function (file, enc, cb) {
          var name = getSrcFile(file.path);
          var aliaPath = getAliaPath(name);

          verMap[aliaPath] = getDataMd5(file.contents);

          this.push(file);
          cb();
          deferred.resolve();
        }))
        .pipe(gulp.dest(dir));

      packPromises.push(deferred.promise);

    })(destFileMap);

  }

});
gulp.task('makeConf', ['makePacks'], function () {

  Q.all(packPromises)
    .done(function () {
      gulp.src(getDestFile(confFile))
        .pipe(through.obj(function (file, enc, cb) {
          var js = file.contents.toString();
          js = js.replace(/require(js)?\.config\s*?\(\s*?({[\s\S]*?)}\s*?\)/, "require.config($2" + ',\n"verMap" : ' + JSON.stringify(verMap) + "})");

          file.contents = new Buffer(js);
          this.push(file);
          cb();
        }))
        .pipe(gulp.dest(conf.config.dest));
    });
});

gulp.task('makeTpls',function() {
  gulp.src(conf.html.fileset)  
    .pipe(gulp.dest(conf.html.dest));
});

gulp.task('default', ['makeTpls','makeConf']);

代码目前只是个雏形，还有很多需要完成的工作，也有很多地方可以优化。

写这篇文章算是记录自己这一个多星期的研究成果吧。

最后附上github地址： https://github.com/hellopao/requirejs