7

我已经开始在一个虚拟项目上使用 require js。我现在想使用 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”}]

问题是我的 ModuleA 变成：

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

但是没有从 ModuleA 加载。开发中来自ModeulA的代码加载并执行，构建后的代码加载但不运行。

我该如何解决这个问题？

更新

http://pastebin.com/p1xUcY0A --> start.js

http://pastebin.com/dXa6PtpX --> ModuleA js-animation.js

http://pastebin.com/xcCvhLrT --> ModuleB css-animation.js 无依赖。

http://pastebin.com/j51V5kMt --> 运行优化器时使用的 r.js 配置文件。

http://pastebin.com/UVkWjwe9 --> 运行 r.js 后 js-animation.js 的外观。这是有问题的文件。我没有从这个文件中得到 js-animation 模块。require 不会返回我的 js-animation 对象。

编辑：

删除模块定义末尾的 .js 和 from start js 后，优化后的 start.js 为http://pastebin.com/LfaLkJaT，js-animations 模块为http://pastebin.com/qwnpkCC6。在 chrome 中，我在控制台中收到此错误http://pastebin.com/Hq7HGcmm

4

2 回答 2

1

我相信您的设置问题在于您将模块依赖项名称以.js. 根据文档：

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

如果 RequireJS 看到一个以它结尾的模块名称，.js它假定模块名称是相对于文档的路径。通过在其中结束您的模块依赖项名称，.js它在开发模式下可以正常工作，因为 RequireJS 将去加载指定为依赖项的文件。在您的情况下，它将加载文件js/js-animation.js，查看匿名define并正确加载模块。

在生产中，您的start.js模块仍然需要"js/js-animation.js". RequireJS 将在路径中加载您的优化模块，js/js-animation.js但现在优化器已将您的匿名模块转换为命名模块（在本例中"js/js-animation"）。结果是文件将被加载，但文件中没有define'd 模块具有匹配的名称，"js/js-animation.js"因此在某种意义上您的动画模块丢失了。

解决方案 / TL;DR：从所有模块依赖项名称（以及 r.js 配置中的模块定义）中删除尾随.js，你应该没问题。所以你start.js应该变成（第4行的变化）：

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")
    });
  } );
} );

另请注意，您可能希望在 RequireJS 配置中使用baseUrlandpaths来清理模块名称（例如，您可以删除js/前缀）。

于 2012-08-18T13:59:50.513 回答
1

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

于 2012-09-20T06:57:52.970 回答