Javascript 使用RequireJS加载主干和下划线

我试图用RequireJS加载主干和下划线（以及jQuery）。使用最新版本的主干和下划线，看起来有点棘手。首先，下划线自动注册为一个模块，但主干网假设下划线是全局可用的。我还应该注意到主干似乎并没有将自己注册为一个模块，这使得它与其他lib不一致。这是我能想到的最有效的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

---

有没有更好的处理方法？谢谢

更新：从1.3.0版开始

您可以在James Burke（RequireJS的维护者）的AMD支持下使用和fork

更多信息

模块已正确注册，无需订购插件：

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

下划线实际上是可选的，因为主干现在可以自己获得依赖项：

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

对于一些，你也可以这样写：

define(function(require) {
    var Backbone = require('backbone'),
        $ = require('jquery');

    return {
        initialize: function(){
            // you can use $ and Backbone here with
            // dependencies loaded i.e. Underscore
        }
    };
});

关于优化器错误：双重检查生成配置。我假设您的路径配置已关闭。如果您有一台电脑，您可以使用：

// 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"
        }
    ]
})

现在，使用新配置，可以更好地有机地解决主干和下划线等非AMD模块的问题

shim

配置易于使用：（1）如果存在依赖项（

deps

），则说明依赖项（可能来自

路径

配置，也可能是有效路径本身）。（2） （可选）从要填充的文件中指定全局变量名称，该名称应导出到需要该名称的模块函数中。（如果不指定导出，则只需使用全局函数，因为不会向require/define函数传递任何内容。）

下面是一个使用

shim

加载主干的简单示例。它还添加了下划线的导出，即使它没有任何依赖项

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、主干和下划线位于名为“jquery.js”、“backbone.js”和“underline.js”的文件中，与此“main”代码（成为require的baseURL）位于同一目录中。如果不是这样的话，您需要使用一个

---

我个人认为，有了内置的

shim

功能，不使用主干线和下划线分叉版本的优势超过了使用其他流行答案中推荐的AMD分叉的好处，但无论哪种方式都有效。

好消息，下划线1.6.0现在支持requirejs define

下面的版本需要填隙片，或者需要下划线.js，然后盲目地希望“u”全局变量没有；（公平地说，这是一个公平的赌注）

只需通过

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

---

我会直接写下来，你可以在requirejs.org上阅读解释，你可以使用下面的代码作为日常使用的代码片段；（顺便说一句，我用的是约曼语）（因为很多东西都更新了，我从2014年2月起就发布了这篇文章。）

确保在index.html中包含脚本

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

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

---

我希望我是有用的

作为参考，从版本1.1.1（~2013年2月）起，主干网也可以。它将与requirejs一起工作，而无需使用其垫片配置。（自1.1.0以来也没有更新过）

require.config({
等待秒：500，
路径：{
jquery：“libs/jquery/jquery”，
jqueryCookie：“libs/jquery/jquery.cookie”，
.....
},
垫片：{
jqxcore：{
出口：“$”，
部门：[“jquery”]
},
JQX按钮：{
出口：“$”，
deps:[“jquery”、“jqxcore”]
}
............
}
});
要求([
//加载我们的应用程序模块并将其传递给我们的定义函数
“应用程序”
]，功能（应用程序）{
//“app”依赖项作为“app”传入
//同样，传入的其他依赖项不是“AMD”，因此不向该函数传递参数
App.initialize（）；
});

您使用过任何教程吗？我浏览了各种教程，例如，但它们现在似乎已经过时，使用了下划线和主干线的最新版本。我还发现requirejs很难与其他库一起使用，反之亦然。这就是为什么我创建了一个库，它更易于使用，并且使用angular进行了测试。底部有一个演示应用程序：您还可以将所有脚本组合成一个脚本，而不依赖于moduler.jsbtw同步异步模块定义有点矛盾：）哈！说得好。编辑。这正是我要找的。非常感谢。非常详细的回答。它现在正在运行，正如您所描述的那样。+1准确、有效且更新的答案+示例。干得好Riebel，你帮了我，我相信其他人也帮了我很多。在原始帖子发布后很长一段时间保持更新，这是一个额外的奖励。回答得好@Riebel！这对我真的很有用。顺便说一句，我也建议你看看。它是由jrburke（requirejs的创建者）创建的一个库，用于从github检索依赖项。例如，检索amd版本的下划线只需键入：volo add下划线此代码是否可用于

示例RequireJS 2.0.1+jQuery 1.7.2项目

？如果我理解正确，Henry，您会问$plugins是否需要垫片。如果使用该示例项目中的组合require-jquery.js文件，则情况并非如此。这是因为在组合文件中，jquery与require同步加载，因此jquery保证在您尝试在任何模块中使用任何$plugins时加载。在这种情况下，当您想要使用$plugins时，您可以将它们包含在依赖项列表中，就像它们是AMD一样，即使它们不是。这绝对是一个例外，一般来说，任何非AMD模块都需要使用shim。请注意，shim配置与该示例项目兼容，并可用于添加其他非AMD库。我想我会提到，这确实是一种方式，希望我能给予+50票，使其成为#1答案。Th

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

require.config({
  waitSeconds: 500,
  paths: {
    jquery: "libs/jquery/jquery",
    jqueryCookie: "libs/jquery/jquery.cookie",
    .....
  },

  shim: {
    jqxcore: {
      export: "$",
      deps: ["jquery"]
    },
    jqxbuttons: {
      export: "$",
      deps: ["jquery", "jqxcore"]
    }
    ............
  }
});

require([
 <i> // Load our app module and pass it to our definition function</i>
  "app"
], function(App) {
  // The "app" dependency is passed in as "App"
  // Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function
  App.initialize();
});