Javascript 如何在生产环境中动态加载多个优化的requirejs模块？

我已经开始在一个虚拟项目上使用requirejs。现在，我想使用r.js脚本来构建我的生产项目

背景是：

• 名为start.js的主文件是：

  require([/* some stuff */], function (){ /* app logic */ });
  

  它有一个if，根据某些条件决定我需要什么

• 所需文件为ModuleA或ModuleB

• ModuleA和ModuleB都有依赖项

  define([/*some deps*/], function(dep1, dep2...) { 
      /* app logic */ 
      return { /* interface */
  }
  

• 在优化和模块连接之前，在开发模式中一切都很好

• 使用r.js构建时，我将以下内容指定为模块目标： 模块：[{name:“start”}，{name:“ModuleA”}，{name:“ModuleB”}]

问题是我的模块A变成了：

 define(dep1 ..);
 define(dep2 ..);
 define(ModuleA ..);

但是模块A没有加载任何内容。开发中来自ModeulA的代码加载并执行，构建后的代码加载但不运行

我如何解决这个问题

更新

-->start.js

-->ModuleA js-animation.js

-->ModuleB css-animation.js无deps

-->运行优化器时使用的r.js配置文件

-->js-animation.js在运行r.js后的外观。这是有问题的文件。我没有从这个文件中获取js动画模块。require不返回我的js动画对象

编辑：

---

在删除模块定义末尾的.js和from start js中的.js之后，优化后的start.js和js animations模块是。在chrome中，我在控制台中遇到了这个错误

我相信你的设置的问题在于你在

.js

中结束了你的模块依赖名。根据文件：

默认情况下，RequireJS还假设所有依赖项都是脚本，因此它不希望在模块ID上看到后缀“.js”。当将模块ID转换为路径时，RequireJS将自动添加它

如果RequireJS看到模块名以

.js

结尾，则它假定模块名是相对于文档的路径。通过在

.js

中结束模块依赖项名称，它在开发模式下运行良好，因为RequireJS将转到并加载指定为依赖项的文件。在您的情况下，它将加载文件

js/js animation.js

，请参阅匿名

定义

，并正确加载模块

在生产中，您的

start.js

模块仍然需要

“js/js animation.js”

。RequireJS将在路径

js/js animation.js

处加载优化模块，但现在优化器已将匿名模块转换为命名模块（在本例中为

“js/js animation”

）。结果是将加载文件，但文件中没有定义的模块名称与文件中的“js/js animation.js”匹配，因此从某种意义上说，您的动画模块丢失了

溶液/TL；DR:从所有模块依赖项名称（以及r.js配置中的模块定义）中删除尾部的

.js

，您应该会没事的。因此，您的

start.js

应该变成（第4行的更改）：

---

另外请注意，您可能希望在RequireJS配置中使用

baseUrl

和

路径

，以清除模块名称（例如，这样您就可以删除

js/

前缀）。

当前的require.js实现似乎存在问题。解决方法是创建一个全局中介器或中介器模块，让所有动态加载的模块调用中介器，并通过事件宣布它们自己。这对我很有用。

我可以粘贴虚拟项目的整个代码，但它有大约300行。将您的代码放在pastebin.com上，编辑您的问题并附加您的pastebin url:）不确定pastebin是否是一个好选项。这些项目在开发中有4个js文件，在生产中应该有3个：|澄清：您的“启动”模块是否在生成依赖项数组的

require

之外有逻辑？如果是这样，这个数组将包含依赖项名称“ModuleA”或“ModuleB”？也许你可以为

start.js

添加代码……谢谢@rharper的评论。我的start.js模块有两个要求。两个内部require调用中只有一个是基于条件完成的。这说明了我的情况吗？嗨，谢谢你的详细回复。我很感激。我从模块名称中删除了.js，构建脚本现在声明的模块名称末尾没有.js。这个问题仍然存在。第二个制作模块js animation与之前一样有两个定义，第一个用于插件，第二个用于自身，start js仍然无法从中获取内容：|@VladNicula看起来您在编辑

start.js

时出错了。您删除了模块名称末尾的

.js

（好），但也删除了前面的

js/

（您需要离开）。您的require.js

js animation

模块字面上被称为

'js/js animation'

，您可以从优化的输出中看到这一点。如果您的代码在开发模式下工作，并且出现了以下错误，我会感到惊讶。。。将

js/

添加回start.js中的模块名称，并尝试一下。start.js模块位于js文件夹中。如果我在模块名之前添加/js，我会得到一个“未捕获错误：脚本错误”，并且url中有/js/js/module name，这是错误的……我也有类似的问题，但与包有关。当我尝试加载缩小的包时，我的main.js不会执行

require([], function () {
  var $html = $("html"),
    animationModule = localStorage['cssanimations'] == 'true' ? 
    'js/css-animation' : 'js/js-animation',
    $doc = $html.find("body");

  console.debug("loading ", animationModule);
  require([animationModule], function( animationModule ) {
    animationModule.run({
      target : $("div.flex")
    });
  } );
} );