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

我有两个小的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);

});

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

最好的祝福,
博多

解决方法:

我建议首先为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和存储库模块本身的映射以避免循环依赖：

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.

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

标签：javascript,module,backbone-js,requirejs,shim
来源： https://codeday.me/bug/20190723/1511296.html