Question

我有两个小的Backbone插件，看起来像这样：

(function($, _, Backbone) {

var ListView = Backbone.View.extend({
// blablabla
});

Backbone.ListView = ListView;

})($, _, Backbone);

和

(function($, _, Backbone) {

var Repository = Backbone.Model.extend({
// blablabla
});

Backbone.Repository = Repository;

})($, _, Backbone);

我现在已经设置了require.config：

require.config({

    baseUrl: "javascripts",

    shim: {
        "jquery": {
            exports: "$"
        },
        "underscore": {
            exports: "_"
        },
        "backbone": {
            deps: ['jquery', 'underscore'],
            exports: "Backbone"
        },
        "ListView": {
            deps: ['jquery', 'underscore', 'backbone'],
            exports: "Backbone.ListView"
        },
        "Repository": {
            deps: ['jquery', 'underscore', 'backbone'],
            exports: "Backbone.Repository"
        }        

    },

    paths: {
        "jquery": "Vendors/jquery",
        "underscore": "Vendors/underscore",
        "backbone": "Vendors/backbone",
        "ListView": "Extensions/ListView",
        "Repository": "Extensions/Repository"
    }

});

现在我们来解决这个问题。如果我想使用这两个插件，这就是我目前处理模块依赖的方法：

require(['jquery', 'underscore', 'ListView', 'Repository'], function($, _, Backbone1, Backbone2) {

    // this is backbone + list view
    console.log(Backbone1);
    // this is backbone + repository
    console.log(Backbone2);       

});

但我希望插件已经注册到主干：

require(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {

    // this now is backbone + listView + repository
    console.log(Backbone);

});

我该怎么做？我需要改变什么？

祝你好运，伯度

Answer 1

我建议首先为ListView和Repository创建模块，以便将它们（并希望Backbone）保留在全局命名空间之外，如下所示：

list_view.js

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
  Backbone.ListView = Backbone.View.extend({
    ... ListView code here ...
  }
  return Backbone.ListView
});

repository.js

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
  Backbone.Repository = Backbone.View.extend({
    ... Repository code here ...
  }
  return Backbone.Repository
});

然后，您可以使用require.js'map config将依赖项映射到包含两个模块的适配器，然后撤消list_view和repository模块本身的映射避免循环依赖：

requirejs.config({
  map: {
    '*': {
      'backbone': 'backbone-adapter'
    },
    'list_view': {
      'backbone': 'backbone'
    },
    'repository': {
      'backbone': 'backbone'
    },
});

然后创建一个文件backbone-adapter.js以将插件与Backbone本身捆绑在一起：

骨架adapter.js

define(['backbone', 'list_view', 'repository'], function (Backbone) {
  return Backbone;
});

然后在您的模块中，当您将'backbone'作为依赖项时，requirejs会将其映射到backbone-adapter，而Backbone.ListView将包含您的插件，以便它们可用作Backbone.Repository和{{1}}。

我实际上没有测试过上面的代码，但我使用类似的策略将供应商模块与我自己的插件捆绑在一起，这对我来说很好。（这个想法取自this discussion。）

Answer 2

我不会做那样的事情，你正在创建一个包含所有模块的全局对象，这不是如何使用require.js。

您应该明确定义依赖项。如果您需要ListView，请将其添加到需求调用中，如果您需要Repository将其添加到require调用中，...

如果您仍想这样做，您可以定义自己的Backbone模块：

# backbone.js

define(['vendor/backbone', 'ListView', 'Repository'],
  function(Backbone, ListView, Repository) {

    Backbone.ListView = ListView
    Backbone.Repository = Repository

    return Backbone
});

然后你的垫片配置：

paths: {
    ...
    "backbone": "backbone",
    ...
}

（再次，你真的不应该这样做!!）

Requirejs shim：想要将骨干插件直接注册到核心骨干网

2 个答案: