使用RequireJS加载Backbone和Underscore
我正在尝试使用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现在更好地使用新的shim配置来更好地处理非AMD模块，例如Backbone＆Underscore。
shim配置使用起来很简单：（1）如果有的话（可能来自paths配置，或者可能是有效的路径本身），则表示依赖关系（ deps ）（如果有的话）。 （2）（可选）从要加密的文件中指定全局变量名称，该名称应该导出到需要它的模块函数中。 （如果你没有指定输出，那么你只需要使用全局，因为没有东西会被传入你的require / define函数。）
这里有一个简单的shim加载Backbone的例子。 它也为下划线添加一个导出，尽管它没有任何依赖关系。
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 ）。 如果情况并非如此，则需要使用路径配置。
我个人认为，使用内置shim功能，不使用分支版本的Backbone＆Underscore的优势超过了使用其他流行答案中推荐的AMD分支的好处，但无论哪种方式都可行。
更新 ：从1.3.0版开始，Underscore删除了AMD（RequireJS）支持。
您可以使用amdjs / Backbone 0.9.1和amdjs / Underscore 1.3.1分支，并由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 i.e. Underscore
}
};
});
用一些AMD糖你也可以这样写：
define(function(require) {
var Backbone = require('backbone'),
$ = require('jquery');
return {
initialize: function(){
// you can use $ and Backbone here with
// dependencies loaded i.e. Underscore
}
};
});
关于优化器错误：请仔细检查您的构建配置。 我假设你的路径配置已关闭。 如果你有一个类似于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），Backbone还将自己注册为AMD模块。 它将与requirejs协同工作，无需使用其shim配置。 （James Burke的amdjs fork也从1.1.0开始没有更新）
链接地址: http://www.djcxy.com/p/70407.html