如何在RequireJS中混合Underscore插件?

时间:2012-11-29 13:57:45

标签: javascript asynchronous requirejs underscore.js dynamic-script-loading

在加载Underscore时执行代码的正确方法是什么?我正在尝试执行以下代码,以便在模块需要时自动扩展_ exported命名空间:

_.mixin(_.str.exports());

文档有点模糊,但我想我把它放在shim init部分?我尝试了以下但我甚至无法在init中获得断点:

require.config({
    paths: {
        jquery: 'libs/jquery/jquery.min',
        underscore: 'libs/underscore/lodash.min',
        underscorestring: 'libs/underscore/underscore.string.min'
    },

    shim: {
        underscore: {
            exports: '_'
        }
        underscorestring: {
            deps: ['underscore'],
            init: function (_) {
                //Mixin plugin to namespace
                _.mixin(_.str.exports());

                return _;
            }
        }
    }
});

当我尝试这样做并使用underscorestring时,我收到此错误:

  

未捕获的TypeError:对象函数s(e){return new o(e)}没有   方法'startsWith'

文档:

3 个答案:

答案 0 :(得分:19)

我不知道它是否是正确的方法,但我通过反转来使其工作,以便下划线取决于underscore.string。此外,这种方式您不必要求underscore.string。

require.config({
  shim: {
    'backbone': {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    },
    'underscore': {
      deps: ['underscore.string'],
      exports: '_',
      init: function(UnderscoreString) {
        _.mixin(UnderscoreString);
      }
    }
  },
  paths: {
    'backbone'          : 'lib/backbone',
    'jquery'            : 'lib/jquery/jquery',
    'text'              : 'lib/require/text',
    'underscore'        : 'lib/underscore',
    'underscore.string' : 'lib/underscore.string'
  }
});

更新:2014年3月14日

Underscore.js v1.6.0带回了AMD兼容性,并且init()已从RequireJS中删除,因此有些重构是有序的。为了继续使用Underscore.string预先加载Underscore,我制作了一个混音器模块将它们组合在一起。

新的Require.js config

requirejs.config({
  paths: {
    'backbone'            : '../lib/backbone/backbone',
    'backbone.base'       : '../lib/backbone/backbone.base',
    'backbone.extensions' : '../lib/backbone/backbone.extensions',
    'jquery'              : '../lib/jquery/jquery',
    'text'                : '../lib/require/text',
    'underscore'          : '../lib/underscore/underscore',
    'underscore.mixed'    : '../lib/underscore/underscore.mixed',
    'underscore.string'   : '../lib/underscore/underscore.string'
  },
  shim: {
    'backbone.base': {
      deps: ['underscore.mixed', 'jquery'],
      exports: 'Backbone'
    },
  }
});

<子> underscore.mixed

define([
  'underscore',
  'underscore.string'
], function(_, _s) {
  _.mixin(_s.exports());
  return _;
});

最后一步是在模块定义中用'underscore'替换'underscore.mixed'的所有实例。我尝试将Underscore移动到名为underscore.base.js的文件中并使常规underscore混音器(如Backbone设置)以避免此步骤。作为命名的模块的下划线不同意该计划。

答案 1 :(得分:3)

在某处需要下划线吗?因为如果不需要,它将不会被加载。 我设法使用几乎完全相同的代码来处理它:

require.config({
    paths: {
        underscore: [
            '//raw.github.com/documentcloud/underscore/master/underscore-min'
        ,   'lib/underscore'
        ]
    ,   underscorestring: 'https://raw.github.com/epeli/underscore.string/master/dist/underscore.string.min'
    }
,   shim: {
        underscore: { exports: '_' },
        underscorestring: {
            deps: ['underscore'],
            init: function(_) { 
                _.mixin(_.str.exports());
                return _; // guess, this is not needed.
            }
        }
    }
,   exclude: ['underscore']
});

require(['underscore', 'underscorestring'], function(_) {
    console.log( _.chars("i'm a happy string.") );
});

答案 2 :(得分:0)

在我理解我做错了之前,与之斗争了好几个小时

这就是我做错了

您不应重命名main.js中的文件underscore.string

即使在我的库中,我确实在路径中重命名该文件,我将其命名为'underscore.string'

main.js 应该是这样的

require.config({
paths: {
    underscore: 'lib/underscore', 
    'underscore.string' : 'lib/_string' ,
},
shim: { 
    underscore: {
        exports: '_', 
        deps: [ 'jquery', 'jqueryui' ]
    }, 
    'underscore.string': { 
        deps: [ 'underscore' ]
    },
} 
....

然后您可以将其作为依赖添加到您的垫片中,就像我为我的mixin文件所做的那样

shim: { 
    mixin : {
        deps: [ 'jquery',  'underscore', 'underscore.string' , 'bootstrap'  ] 
    },  

或者只是

等不同页面中定义
/*global define */
define([    
    'underscore.string'
], function ( ) {   

现在可以通过_.str或_.string

访问它

这是为什么你应该这样做而不是试图将其命名为

在underscore.string.js的第663行

  // Register as a named module with AMD.
  if (typeof define === 'function' && define.amd)
    define('underscore.string', [], function(){ return _s; });

这意味着如果您定义'underscore.string'

,它只会向AMD需要JS注册它

对于Mix,您可以使用define

 /*global define */
define([     
    'underscore',
    'underscore.string'
], function ( ) {   
  _.mixin(_.str.exports());