未定义主干答案

【问题标题】：Backbone Not Defined未定义主干
【发布时间】：2012-08-13 13:18:34
【问题描述】：

我有一个 Backbone 应用程序，该应用程序从我的代码中使用 Backbone 的不同位置不确定地获取 Backbone is not defined 错误。有时它会先加载，然后网站加载，有时则不会。我使用以下内容作为我的 main.js：

require.config({
  paths: {
    jqueryui: 'libs/jquery/jquery-ui',
    underscore: 'libs/underscore/underscore-min',
    backbone: 'libs/backbone/backbone-min',
    text: 'libs/require/text',
    order: 'libs/require/order',
    searchcollector: 'libs/jquery/searchcollector.plugin',
    guiders: 'libs/jquery/guiders'
  },
  shim: {
    'underscore': {
      exports: '_'
    },
    'backbone': {
      deps: ['underscore'],
      exports: 'Backbone'
    }
  }
});

require([
  'views/app',
  'helpers'
], function(app) {
  var app = window.app = new app();
});

我正在使用

<script data-main="/assets/js/main" src="/assets/js/libs/require/require-jquery.js"></script>

在我的 HTML 中，因此 jQuery 加载了 require。我从这个（http://stackoverflow.com/questions/8131265/loading-backbone-and-underscore-using-requirejs）SO线程中得到了这个建议，但似乎没有任何效果。 Shim 不应该先加载 Backbone，然后使其全局可用吗？任何帮助表示赞赏。

【问题讨论】：

可能与您的问题无关，但是如果您使用带有依赖项的“shim”配置（RequireJS 2.0 功能），则不需要使用订单插件，请参见：@987654321 @ 它说订单插件仅适用于 RequireJS 1.0
订单插件很好。事实上，我过去从 1.0 切换到 2.0 时也遇到过同样的问题（在 require2.0 中使用 order）并且不知道这些变化。我忘记了我的问题是否与 @eipark 的问题相似，但我确实记得它炸毁了我的代码。

标签： backbone.js requirejs

【解决方案1】：

不确定这是否是正确的答案，但我注意到您没有将 jquery 列为 Backbone 依赖项。虽然 Backbone 将 Underscore 列为唯一的硬依赖项，但 Backbone.View 需要 jquery 或 zepto 才能工作。

但是为什么，它似乎在某些时候有效？

这可能是因为 jQuery 是一个 AMD 模块，当您加载时，它有时会先加载，而其他时候则不会。当它在 Backbone 之前加载时，它是可用的并且 Backbone 很高兴。否则，您可能会得到不好的结果。

试试这样的：

在你的路径中添加这个：

jquery: 'libs/require/require-jquery'

在你的垫片中，添加这个：

'backbone': {
  deps: ['underscore', 'jquery'],
  exports: 'Backbone'
}

让我知道你得到的结果。我从未使用过 requirejs2.0 的 shim 功能，所以我很好奇我是否正确理解了更深层次的东西。

【讨论】：

我认为这不是问题，因为您需要 require 才能加载 require.config，并且 require 与 jQuery 加载在同一个文件中，因此您将拥有 jQuery 和 require 之前运行 require.config。这是正确的吗？
我不能肯定地说，我也在学习。但我的理解是，使用 require-jquery 组合文件并不能保证您的 jquery 将在您的其他脚本之前加载。这是异步加载的本质。这就是为什么（我认为）他们需要列出部门。 Require Shim 在文档中，shim'd 插件明确指向 jquery 作为依赖项。另请参阅Shim 这很有趣，所以请随时让我了解您的实验。

【解决方案2】：

在我看来，在同一个文件中加载 require 和 jquery 有点麻烦。

并且设置 jquery 作为 Backbone 的 deps 是 false 因为 Underscore 需要 jquery，并且它是在 Backbone 之前加载的，所以正确的方法是这样的

require.config({
  paths: {
     'jquery': 'path to jquery'
    ,'underscore': 'path to underscore'
    ,'backbone': 'path to backbone'
    **other paths...**
  }
  ,shim: {
     jquery: {
      exports: '$'
    }
    ,'underscore': {
      deps: [ 'jquery' ]
      ,exports: '_'
    }
    ,'backbone': {
      deps: [ 'underscore' ]
      ,exports: 'Backbone'
    }
  }
});

最后你的标签脚本将是

<script data-main="/assets/js/main" src="/assets/js/libs/require.js">
</script>

然后你只需要像这样调用你需要的lib

define( [ 'jquery', 'underscore', 'backbone' ],
  function( $, _, Backbone )
  {
    // stuff
  } );

对于一个模型，你可能不需要 jquery 和下划线，所以只需调用 Backbone 就可以了

define( [ 'backbone' ],
  function( Backbone )
  {
    // Backbone.extend ?
  } );

【讨论】：