Require.js错误:加载模块的超时:backbone,jquerymobile

时间:2013-01-11 14:15:08

标签: javascript jquery backbone.js requirejs

我正在尝试使用r.js来优化我的代码,但我一直在遇到这个错误:

跟踪:init

的依赖项
Error: Load timeout for modules: backbone,jquerymobile

我正在运行的命令是:

$ java -classpath /Users/dixond/build-tools/rhino1_7R4/js.jar:/Users/dixond/build-tools/closurecompiler/compiler.jar org.mozilla.javascript.tools.shell.Main /Users/dixond/build-tools/r.js/dist/r.js -o /Users/dixond/Sites/omm_mobile/js/build.js

我的build.js文件如下所示:

( {
    //appDir: "some/path/",
    baseUrl : ".",
    mainConfigFile : 'init.js',
    paths : {
        jquery : 'libs/jquery-1.8.3.min',
        backbone : 'libs/backbone.0.9.9',
        underscore : 'libs/underscore-1.4.3',
        json2 : 'libs/json2',
        jquerymobile : 'libs/jquery.mobile-1.2.0.min'
    },
    packages : [],
    shim : {
        jquery : {
            exports : 'jQuery'
        },
        jquerymobile : {
            deps : ['jquery'],
            exports : 'jQuery.mobile'
        },
        underscore : {
            exports : '_'
        },
        backbone : {
            deps : ['jquerymobile', 'jquery', 'underscore'],
            exports : 'Backbone'
        }
    },
    keepBuildDir : true,
    locale : "en-us",
    optimize : "closure",
    skipDirOptimize : false,
    generateSourceMaps : false,
    normalizeDirDefines : "skip",
    uglify : {
        toplevel : true,
        ascii_only : true,
        beautify : true,
        max_line_length : 1000,
        defines : {
            DEBUG : ['name', 'false']
        },


        no_mangle : true
    },
    uglify2 : {},
    closure : {
        CompilerOptions : {},
        CompilationLevel : 'SIMPLE_OPTIMIZATIONS',
        loggingLevel : 'WARNING'
    },
    cssImportIgnore : null,
    inlineText : true,
    useStrict : false,
    pragmas : {
        fooExclude : true
    },
    pragmasOnSave : {
        //Just an example
        excludeCoffeeScript : true
    },
    has : {
        'function-bind' : true,
        'string-trim' : false
    },
    hasOnSave : {
        'function-bind' : true,
        'string-trim' : false
    },
    //namespace: 'foo',
    skipPragmas : false,
    skipModuleInsertion : false,
    optimizeAllPluginResources : false,
    findNestedDependencies : false,
    removeCombined : false,
    name : "init",
    out : "main-built.js",
    wrap : {
        start : "(function() {",
        end : "}());"
    },
    preserveLicenseComments : true,
    logLevel : 0,
    cjsTranslate : true,
    useSourceUrl : true
})

我的init.js看起来像这样:

 requirejs.config({
      //libraries
      paths: {
          jquery:       'libs/jquery-1.8.3.min',
          backbone:     'libs/backbone.0.9.9',
          underscore:   'libs/underscore-1.4.3',
          json2 :       'libs/json2',
          jquerymobile: 'libs/jquery.mobile-1.2.0.min'
      },

      //shimming enables loading non-AMD modules
      //define dependencies and an export object
      shim: {
          jquerymobile: {
              deps: ['jquery'],
              exports: 'jQuery.mobile'
          },
          underscore: {
              exports: '_'
          },
          backbone: {
              deps: ['jquerymobile', 'jquery', 'underscore', 'json2'],
              exports: 'Backbone'
          }
      }
    });


requirejs(["backbone",], function(Backbone) {
    //Execute code here
});

在构建过程中我做错了什么?

7 个答案:

答案 0 :(得分:104)

Require.js有一个名为waitSeconds的配置选项。这可能会有所帮助。

RequireJS waitSeconds

以下是使用waitSeconds的示例:

requirejs.config({
    baseUrl: "scripts",
    enforceDefine: true,
    urlArgs: "bust=" + (new Date()).getTime(),
    waitSeconds: 200,
    paths: {
        "jquery": "libs/jquery-1.8.3",
        "underscore": "libs/underscore",
        "backbone": "libs/backbone"
    },
    shim: {
        "underscore": {
            deps: [],
            exports: "_"
        },
        "backbone": {
            deps: ["jquery", "underscore"],
            exports: "Backbone"
        },
    }
});

define(["jquery", "underscore", "backbone"],
    function ($, _, Backbone) {
        console.log("Test output");
        console.log("$: " + typeof $);
        console.log("_: " + typeof _);
        console.log("Backbone: " + typeof Backbone);
    }
);

答案 1 :(得分:41)

错误

我最近使用angularJSrequireJS项目有一个非常类似的问题。

我正在使用Chrome canary build(Version 34.0.1801.0 canary)但安装了稳定版本(Version 32.0.1700.77),在加载Developer console打开的应用时显示完全相同的问题:

Uncaught Error: Load timeout for modules

开发者控制台是关键,因为我没有在控制台未打开时收到错误。我尝试重置所有Chrome设置,卸载任何插件,...到目前为止没有任何帮助。

解决方案

大指针是关于waitSeconds配置选项的Google小组讨论(请参阅下面的资源)。将其设置为0解决了我的问题。我不会检查这个,因为这只是将超时设置为无限。但作为开发过程中的修复,这很好。 Example config

<script src="scripts/require.js"></script>
<script>
  require.config({
    baseUrl: "/another/path",
    paths: {
      "some": "some/v1.0"
    },
    waitSeconds: 0
  });
  require( ["some/module", "my/module", "a.js", "b.js"],
    function(someModule,    myModule) {
      //This function will be called when all the dependencies
      //listed above are loaded. Note that this function could
      //be called before the page is loaded.
      //This callback is optional.
    }
  );
</script>

导致此错误的最常见原因是:

  • 模块中的错误
  • 配置中的错误路径(选中pathsbaseUrl选项)
  • 配置中的双重输入

更多资源

来自requireJS的

疑难解答页面:http://requirejs.org/docs/errors.html#timeout第2,3和4点可能很有用。

类似的问题:Ripple - Uncaught Error: Load timeout for modules: app http://requirejs.org/docs/errors.html#timeout

相关的Google小组讨论:https://groups.google.com/forum/#!topic/requirejs/70HQXxNylYg

答案 2 :(得分:17)

如果其他人遇到这个问题但仍在努力(就像我一样),这个问题也可能来自循环依赖,例如: A取决于B,B取决于A.

RequireJS docs没有提到循环依赖会导致“加载超时”错误,但我现在已经观察到它有两种不同的循环依赖关系。

答案 3 :(得分:15)

waitSeconds的默认值= 7(7秒)

如果设置为0,则完全禁用超时。

src:http://requirejs.org/docs/api.html

答案 4 :(得分:1)

问题的原因是 Require.js 运行到超时,因为项目可能依赖于大型库。默认超时为7秒。增加此配置选项(称为waitSeconds)的值当然会解决它,但这不是正确的方法。 正确的方法是改善页面加载时间。加速页面加载的最佳技术之一是缩小 - 压缩代码的过程。有一些很好的缩小工具,例如r.jswebpack

答案 5 :(得分:0)

我在Mobile Safari 6.0.0(iOS 6.1.4)上运行测试时只会出现此错误。 waitSeconds: 0暂时给了我一个成功的构建。如果我的构建再次失败,我会更新

答案 6 :(得分:0)

TLDR: 使用两个有效的不同名称要求相同的文件两次,可能是以下两个:

  • 绝对路径:'/path/to/file.js'

  • 相对路径:'./path/to/file.js'

  • 作为模块:'path/to/file'

  • 作为主路径配置模块:

    路径:{ “我的/模块/文件”:“/路径/到/文件” }

最近遇到了同样的问题。我确实批量更改了一些 require 路径,所以我知道问题与此有关。

我可以在不到一秒钟的时间内在服务器端日志和网络调试选项卡上清楚地看到正在提供的文件。这不是真正的超时问题。

我尝试按照建议使用 xrayrequire 来查找任何循环依赖,但没有成功。我查找了冲突文件的要求,发现我用不同的名称要求它两次。