14

我正在使用 require.js 来帮助组织基于 Backbone.js 的应用程序。

我正在尝试找出使用与 AMD 不兼容的第 3 方 JavaScript 库的正确方法 require.js

有问题的库是主干-tastypie.js。基本上，该库所做的是对 Backbone 的一些原型方法进行猴子补丁，以便为 TastyPie Django REST 框架提供更简单的支持。它通过直接操作全局命名空间中的 Backbone 对象来做到这一点。

但是，由于我使用 Backbone.js 作为 require.js 模块，因此当该库尝试访问它时它不可用。

我怎样才能在 Backbone 的范围内导入这个骨干美味？

4

3 回答 3

12

更新：我已经分叉了一个 AMD 兼容的骨干美味，称为骨干美味-amd。

虽然 Sander 的解决方案可以工作，但每次你想要主干时都做整个嵌套的 require 事情有点烦人。

骨干美味是所谓的“传统脚本”。您可以通过 4 种方式解决问题。

  1. 让骨干美味的 AMD 自己兼容。您可以通过以下两种方式之一执行此操作。选项 1 是永远不要直接包含骨干——只有骨干美味。然后修改主干美味派以确保需要主干。

    var root = this;
var Backbone = root.Backbone;
if (!Backbone && (typeof require !== 'undefined')) Backbone = require('backbone').Backbone;

    然而，这不是很好，因为本质上它将在骨干美味加载（同步）后开始下载骨干。它也没有让 requirejs 完全理解这些模块之间的关系，这就是重点吗？因此，让我们将骨干美味包装在 define() 中：

    (function (factory) {
        if (typeof define === 'function' && define.amd) {
                // AMD. Register as an anonymous module.
                define(['backbone'], factory);
        } else {
                // RequireJS isn't being used. Assume backbone is loaded in <script> tags
                factory(Backbone);
        }
}(function (Backbone) {
        //Backbone-tastypie contents
}));

    到目前为止，这是此答案中所有内容中的最佳选择。RequireJS 知道依赖关系，它可以解决它们、下载它们并正确评估它们。值得注意的是，Backbone 本身使用选项 1 加载下划线，并且没有将自己定义为模块，这非常糟糕。您可以在这里获得 AMD 优化版本的骨干网。假设您使用的是这个 AMD 版本，您现在可以继续在您的应用程序中要求主干美味（通过在 define() 或实际的 require() 函数中要求它）。您也不必包含主干或下划线，因为这些依赖项由 requirejs 解决。

  2. 使用 require.js排序插件。这迫使事物按顺序加载（在某些方面仍然是异步的，因为它会随时下载它们，但以正确的顺序进行评估）

    require(["order!backbone.js", "order!backbone-tastypie.js"], function () {
     //Your code
});

  3. 将backbone.js 放在优先配置中。无论如何，这都会强制主干及其依赖项始终首先加载。

  4. 将backbone-tastypie 附加到与backbone.js 相同的文件中。每次加载主干时，都会加载主干美味派。哈基？是的。但这与将 jquery 与 requireJS 一起使用的推荐方式非常相似（jquery 插件需要加载 jquery - 就像主干-tastypie 需要加载主干一样）。

于 2011-12-31T17:44:04.973 回答
9

假设您已正确设置路径，以下内容应适用于 RequireJS 2.1.0+。

require.config({
  shim: {
    'underscore': {
      exports: '_'
    },
    'backbone': {
      deps: ['underscore','jquery'],
      exports: 'Backbone'
    },
    'backbone-tastypie': {
      deps: ['backbone']
    }
  }
);
于 2013-02-21T03:13:21.267 回答
2

你可以用另一个要求包装你的要求，首先加载插件，然后你可以做你的应用程序。

require(["myCustomTastyPiePlugin.js"], function () {
    //This callback is called after the one script finish loading.

    require(["one.js", "two.js", "three.js"], function () {
        //This callback is called after the three scripts finish loading.

        // all your code goes here...

    });
});
于 2011-12-30T10:27:11.603 回答