usemin修改了文件名和requirejs依赖关系 [英] usemin revved filenames and requirejs dependencies

问题描述

我遇到了requirejs和usemin的以下问题：

我想要设置一个多页面应用程序，我在那里动态加载仅包含页面特定功能的模块（例如about - > about.js，home - > home.js）。我可以继续在一个文件中打包所有东西，但这只会导致更大的文件大小和开销，这些功能在每个站点都不是必需的！ （例如，为什么我需要在没有转盘的页面上加载轮播插件！）

我查看了一个例子 https://github.com/requirejs/example-multipage-shim

$ b $这实际上是一个很好的方法来处理它，直到我把usemin带入游戏。在修改文件名之后，每个脚本标签的src路径被更新，但依赖关系呢？

 < script src =脚本/供应商/ 1cdhj2.require.js>< /脚本> 
< script type =text / javascript> 
 require（['scripts / common']，function（common）{
 require（['app']，function（App）{
 App.initialize（）; 
 }）; 
}）; 
< / script> 
  

在这种情况下，require.js已被转换的文件1cdhj2.require.js替换。非常好！

但是，常用的模块common和app不再工作，因为common成为4jsh3b.common.js，而app成为23jda3.app.js！ p>

我该怎么办？谢谢你的帮助！
（还使用Yeoman，btw）

解决方案

这是一个棘手的问题，我确定别人固定在一个更优雅的方式，但以下为我工作。

我可以发布这个作为一个咕噜的插件，一旦它有点更强大。

从我的Gruntfile中获取：

 regex-replace：{ 
 rjsmodules：{//我们稍后将在userevd-rjsmodules任务内建立此配置
 src：['build / ** / *。js']，
操作：[] 
} 
}，
 
 
 grunt.registerTask（'userevd-rjsmodules'，'确保RequireJS模块由它们的被修改的模块名称加载' function（）{
 //计划搜索n替换动作
 var actions = grunt.config（regex-replace）。rjsmodules.actions; 
 
 // action object 
 var o = {
 search：''，
 replace：''，//<％= grunt.filerev.summary [build / js / app / detailsController.js]％ > 
标志：'g'
}; 
 
 //读取requirejs配置并查找优化模块
 var modules = grunt.config（requirejs.compile.options.modules ）; 
 var baseDir = grunt.config（requirejs.compile.options.dir）; 
 
 var i，mod; 
 for（i in modules）{
 mod = modules [i] .name; 
 revvedMod = grunt.filerev.summary [baseDir +/+ mod +.js]; 
 revvedMod = revvedMod.replace（'。js'，''）.replace（baseDir +'/'，''）; 
 
 o.name = mod; 
 o.search ='+ mod +'; 
 //使用moduleid，并且grunt.filerev.summary对象可以在磁盘上找到已转换的文件
 o.replace ='+ revvedMod +'; 
 //通过安排搜索/替换动作更新require（[xxx / yyy]）声明
 actions.push（o）; 
} 
 
 grunt.config.set（'regex-replace.rjsmodules.actions'，actions）; 
 grunt.log.writeln（'％j'，grunt.config（regex-replace.rjsmodules））; 
 
 grunt.task.run（regex-replace：rjsmodules）; 
}），
  

I'm running into the following problem with requirejs and usemin:

I want to setup a multipage application, where I dynamically load modules that only contain page specific functionality (e.g. about -> about.js, home -> home.js). I could go ahead and pack everything in a single file, but that just leads to a bigger file size and overhead on functionality that isn't necessary on each site! (e.g. why would I need to load a carousel plugin on a page that doesn't have a carousel!)

I checked out the example https://github.com/requirejs/example-multipage-shim

That is in fact a great way to deal with it, until I bring usemin into the game. After revving the filenames the src path of each script tag is updated, but what about the dependencies?

<script src="scripts/vendor/1cdhj2.require.js"></script>
<script type="text/javascript">
   require(['scripts/common'], function (common) {
      require(['app'], function(App) {
          App.initialize();
      });
   });
</script>

In that case, require.js got replaced by the revved file 1cdhj2.require.js. Great!

But the required modules "common" and "app" no longer work since common became 4jsh3b.common.js and app became 23jda3.app.js!

What can I do about this? Thanks for your help! (Also using Yeoman, btw)

解决方案

It's a tricky problem and I'm sure somebody else fixed in in a more elegant way, but the following works for me.

I might publish this as a grunt plugin once it's a little more robust.

Taken from my Gruntfile:

"regex-replace": {
  rjsmodules: { // we'll build on this configuration later, inside the 'userevd-rjsmodules' task
    src: ['build/**/*.js'],
    actions: []
  }
},


grunt.registerTask('userevd-rjsmodules', 'Make sure RequireJS modules are loaded by their revved module name', function() {
// scheduled search n replace actions
var actions = grunt.config("regex-replace").rjsmodules.actions;

// action object
var o = {
  search: '',
  replace: '', //<%= grunt.filerev.summary["build/js/app/detailsController.js"] %>
  flags: 'g'
};

// read the requirejs config and look for optimized modules
var modules = grunt.config("requirejs.compile.options.modules");
var baseDir = grunt.config("requirejs.compile.options.dir");

var i, mod;
for (i in modules) {
  mod = modules[i].name;
  revvedMod = grunt.filerev.summary[baseDir + "/" + mod + ".js"];
  revvedMod = revvedMod.replace('.js', '').replace(baseDir+'/','');

  o.name = mod;
  o.search = "'"+mod+"'";
  // use the moduleid, and the grunt.filerev.summary object to find the revved file on disk
  o.replace = "'"+revvedMod+"'";
  // update the require(["xxx/yyy"]) declarations by scheduling a search/replace action
  actions.push(o);
}

grunt.config.set('regex-replace.rjsmodules.actions', actions);
grunt.log.writeln('%j', grunt.config("regex-replace.rjsmodules"));

grunt.task.run("regex-replace:rjsmodules");
}),

这篇关于usemin修改了文件名和requirejs依赖关系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！