使用RequireJS加载主干和下划线

我正在尝试使用RequireJS加载Backbone和Underscore(以及jQuery)。 使用Backbone和Underscore的最新版本,似乎有点棘手。 首先,Underscore将自己注册为一个模块,但Backbone假设Underscore在全球范围内可用。 我还应该注意到Backbone似乎并没有将自己注册为一个与其他库不一致的模块。 这是最好的main.js我可以拿出这个作品:

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(); }) }); 

我应该提到,虽然它的工作,优化器扼杀它。 我收到以下内容:

 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 

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

RequireJS 2.X现在更好地使用新的shimconfiguration来有机地处理非AMD模块,例如Backbone&Underscore。

shimconfiguration使用起来很简单:(1)指定依赖( deps )(如果有的话)(可能来自pathsconfiguration,或者可能是有效的path本身)。 (2)(可选)从你正在填充的文件中指定全局variables名称,该文件应该被导出到你需要的模块函数中。 (如果你不指定输出,那么你只需要使用全局,因为没有东西会被传入你的require / define函数。)

这里有一个简单的示例用shim加载Backbone。 它也为下划线添加一个导出,尽pipe它没有任何依赖关系。

 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和下划线在与这个“main”代码相同的目录中,名为“jquery.js”,“backbone.js”和“underscore.js”的文件中(这成为需求的baseURL )。 如果情况并非如此,则需要使用pathconfiguration 。

我个人认为,使用内置shimfunction,不使用分支版本的Backbone&Underscore的优点超过了使用在其他stream行答案中推荐的AMD分叉的好处,但是这两种方法都有效。

更新 :从1.3.0版开始, Underscore删除了AMD(RequireJS)支持 。

您可以使用amdjs / Backbone 0.9.1和amdjs / Underscore 1.3.1 fork来支持来自James Burke(RequireJS的维护者)的AMD支持。

有关AMD支持Underscore和Backbone的更多信息。

 // main.js using RequireJS 1.0.7 require.config({ paths: { 'jquery': 'libs/jquery/1.7.1/jquery', 'underscore': 'libs/underscore/1.3.1-amdjs/underscore', // AMD support 'backbone': 'libs/backbone/0.9.1-amdjs/backbone', // AMD support 'templates': '../templates' } }); require([ 'domReady', // optional, using RequireJS domReady plugin 'app' ], function(domReady, app){ domReady(function () { app.initialize(); }); }); 

这些模块已正确注册,不需要订购插件:

 // app.js define([ 'jquery', 'underscore', 'backbone' ], function($, _, Backbone){ return { initialize: function(){ // you can use $, _ or Backbone here } }; }); 

Underscore实际上是可选的,因为Backbone现在得到它自己的依赖关系:

 // app.js define(['jquery', 'backbone'], function($, Backbone){ return { initialize: function(){ // you can use $ and Backbone here with // dependencies loaded ie Underscore } }; }); 

用一些AMD糖你也可以这样写:

 define(function(require) { var Backbone = require('backbone'), $ = require('jquery'); return { initialize: function(){ // you can use $ and Backbone here with // dependencies loaded ie Underscore } }; }); 

关于优化器错误:请仔细检查您的构buildconfiguration。 我假设你的pathconfiguration是closures的。 如果你有一个类似于RequireJS Docs的目录设置,你可以使用:

 // app.build.js ({ appDir: "../", baseUrl: "js", dir: "../../ui-build", paths: { 'jquery': 'libs/jquery/1.7.1/jquery', 'underscore': 'libs/underscore/1.3.1-amdjs/underscore', 'backbone': 'libs/backbone/0.9.1-amdjs/backbone', 'templates': '../templates' }, modules: [ { name: "main" } ] }) 

作为参考,从版本1.1.1(〜Feb'13),骨干也注册自己作为一个AMD模块 。 它将使用requirejs而不需要使用其shimconfiguration。 ( James Burke的amdjs fork也从1.1.0开始没有更新)

我会直接写下来,你可以阅读requirejs.org的解释,你可以使用下面的代码作为日常使用的代码片段; (ps我使用yeoman)(因为许多事情更新,即时通讯发布截至2014年2月。)

确保你在index.html中包含脚本

 <!-- build:js({app,.tmp}) scripts/main.js --> <script data-main="scripts/main" src="bower_components/requirejs/require.js"></script> <!-- endbuild --> 

然后,在main.js中

 require.config({ shim: { 'backbone': { deps: ['../bower_components/underscore/underscore.js', 'jquery'], exports: 'Backbone' } }, paths: { jquery: '../bower_components/jquery/jquery', backbone: '../bower_components/backbone/backbone' } }); require(['views/app'], function(AppView){ new AppView(); }); 

app.js

 /** * App View */ define(['backbone', 'router'], function(Backbone, MainRouter) { var AppView = Backbone.View.extend({ el: 'body', initialize: function() { App.Router = new MainRouter(); Backbone.history.start(); } }); return AppView; }); 

我希望我是有用的。

好消息,Underscore 1.6.0现在支持requirejs定义!

低于这个的版本需要垫片,或者需要underscore.js然后盲目地希望“_”全局variables没有被粉碎(这是公平的赌注)

简单地加载它

  requirejs.config({ paths: { "underscore": "PATH/underscore-1.6.0.min", } });