使用 RequireJS 加载 Backbone 和 Underscore [英] Loading Backbone and Underscore using RequireJS

问题描述

我正在尝试使用 RequireJS 加载 Backbone 和 Underscore(以及 jQuery).使用最新版本的 Backbone 和 Underscore，这似乎有点棘手.一方面，Underscore 自动将自己注册为一个模块，但 Backbone 假设 Underscore 是全局可用的.我还应该注意到，Backbone 似乎没有将自己注册为一个模块，这使得它与其他库不一致.这是我能想到的最好的 main.js:

I'm trying to load Backbone and Underscore (as well as jQuery) with RequireJS. With the latest versions of Backbone and Underscore, it seems kind of tricky. For one, Underscore automatically registers itself as a module, but Backbone assumes Underscore is available globally. I should also note that Backbone doesn't seem to register itself as a module which makes it kind of inconsistent with the other libs. This is the best main.js I could come up with that works:

require(
{
    paths: {
        'backbone': 'libs/backbone/backbone-require',
        'templates': '../templates'
    }
},
[
    // jQuery registers itself as a module.
    'http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js',

    // Underscore registers itself as a module.
    'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.1/underscore-min.js'
], function() {

    // These nested require() calls are just due to how Backbone is built.  Underscore basically says if require()
    // is available then it will automatically register an "underscore" module, but it won't register underscore
    // as a global "_".  However, Backbone expects Underscore to be a global variable.  To make this work, we require
    // the Underscore module after it's been defined from within Underscore and set it as a global variable for
    // Backbone's sake.  Hopefully Backbone will soon be able to use the Underscore module directly instead of
    // assuming it's global.
    require(['underscore'], function(_) {
        window._ = _;
    });

    require([
        'order!http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js',
        'order!app'
    ], function(a, app) {
        app.initialize();
    })
});

我应该提到的是，虽然它可以工作，但优化器会因此而窒息.我收到以下信息:

I should mention that, while it works, the optimizer chokes on it. I receive the following:

Tracing dependencies for: main
js: "/home/httpd/aahardy/requirejs/r.js", line 7619: exception from uncaught JavaScript throw: Error: Error: Error evaluating module "undefined" at location "/home/httpd/aahardy/phoenix/trunk/ui/js/../../ui-build/js/underscore.js":
JavaException: java.io.FileNotFoundException: /home/httpd/aahardy/phoenix/trunk/ui/js/../../ui-build/js/underscore.js (No such file or directory)
fileName:/home/httpd/aahardy/phoenix/trunk/ui/js/../../ui-build/js/underscore.js
lineNumber: undefined
http://requirejs.org/docs/errors.html#defineerror
In module tree:
    main

有没有更好的方法来处理这个问题?谢谢！

Is there a better way of handling this? Thanks!

推荐答案

RequireJS 2.X 现在有机地解决了非 AMD 模块，例如 Backbone &下划线更好，使用新的 shim 配置.

RequireJS 2.X now organically addresses non-AMD modules such as Backbone & Underscore much better, using the new shim configuration.

shim 配置使用起来很简单:(1) 声明依赖项 (deps)，如果有的话，(可能来自 paths 配置，或者本身可能是有效路径).(2)(可选)从您正在填充的文件中指定全局变量名称，该名称应该导出到需要它的模块函数中.(如果您不指定导出，那么您只需要使用全局，因为什么都不会传递到您的 require/define 函数中.)

The shim configuration is simple to use: (1) one states the dependencies (deps), if any, (which may be from the paths configuration, or may be valid paths themselves). (2) (optionally) specify the global variable name from the file you're shimming, which should be exported to your module functions that require it. (If you don't specify the exports, then you'll need to just use the global, as nothing will get passed into your require/define functions.)

这是一个使用 shim 加载 Backbone 的简单示例.它还为下划线添加了导出，即使它没有任何依赖项.

Here is a simple example usage of shim to load Backbone. It also adds an export for underscore, even though it doesn't have any dependencies.

require.config({
  shim: {
    underscore: {
      exports: '_'
    },
    backbone: {
      deps: ["underscore", "jquery"],
      exports: "Backbone"
    }
  }
});

//the "main" function to bootstrap your code
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone) {   // or, you could use these deps in a separate module using define

});

^{注意: 这个简化的代码假设 jquery、backbone 和 underscore 位于同一目录中名为jquery.js"、backbone.js"和underscore.js"的文件中作为这个主要"代码(它成为 require 的 baseURL).如果不是这种情况，您需要使用 路径配置.}

^{Note: this simplified code assumes that jquery, backbone and underscore are in files named "jquery.js", "backbone.js" and "underscore.js" in the same directory as this "main" code (which becomes the baseURL for require). If this isn't the case, you'll need to use a paths config.}

我个人认为使用内置的 shim 功能，不使用 Backbone & 的分叉版本的优势.下划线超过了使用其他流行答案中推荐的 AMD fork 的好处，但无论哪种方式都有效.

I personally think with the built-in shim functionality, the advantages of not using a forked version of Backbone & Underscore outweigh the benefits of using the AMD fork recommended in the other popular answer, but either way works.

这篇关于使用 RequireJS 加载 Backbone 和 Underscore的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！