Question

我试图通过Requirejs模块化我的Backbone应用程序，但我似乎无法让Requirejs包含Backbone。这是我的main.js，它包含在索引页面中：

require.config({
    baseUrl: '/static/js/',
    paths: {
        jquery: 'libs/jquery/jquery-min',
        underscore: 'libs/underscore/underscore-min',
        backbone: 'libs/backbone/backbone-min',
        text: 'libs/require/text',
    },
});

require(['/static/js/views/app.js'], function(AppView) {
    var appView = new AppView;
});

这是我的app.js，它包含在上面的文件中：

define([
    'jquery',
    'underscore',
    'backbone',
], function($, _, Backbone) {
  console.log($);
  console.log(_);
  console.log("inside of the app js file");
    var AppView = Backbone.View.extend({

        initialize: function() {
            console.log("inside of appview initialize");
        },

    });
});

以下信息将在我的Google Chrome控制台中打印出来：

function (a,b){return new e.fn.init(a,b,h)}
app.js:7undefined
app.js:8inside of the app js file
app.js:9Uncaught TypeError: Cannot read property 'View' of undefined

$的定义有效，但_和Backbone的定义不起作用。它们是未定义的。知道为什么会这样吗？

Answer 1

我建议你使用捆绑了jQuery的requireJS版本。它会为你节省很多痛苦。您可以在此处阅读详细信息：http://requirejs.org/docs/jquery.html并在此处下载文件：https://github.com/jrburke/require-jquery

用他们自己的话说：

使用RequireJS，脚本可以按照与指定顺序不同的顺序加载。这可能会导致jQuery插件出现问题，因为jQuery插件已经加载了jQuery。使用组合的RequireJS + jQUery文件可确保在加载任何jQuery插件之前，jQuery位于页面中。

这应该注意使用requireJS正确加载jQuery：

<script data-main="js/main" src="js/require-jquery.js"></script>

<强> Main.js

这里有几点说明：

无需重新定义jquery的路径，因为已经处理了
您仍需将jquery指定为必需模块
（我必须更新路径才能让它们在我的系统中运行）

代码：

require.config({
    baseUrl: 'js/',
    paths: {
        underscore: 'libs/underscore-min',
        backbone: 'libs/backbone-min',
    },
});

require(['jquery', 'app'], function($, AppView) {
    console.log("done w/ requires");
    console.log($)
    console.log(AppView)
    var appView = new AppView;
});

<强> app.js

一对夫妇注意到：

如果已将JS文件定义为模块，则只能在回调中加载后检索JS文件。所以函数（$，_，Backbone）将失败。
您必须返回您的对象，以便可以在main.js回调中使用它（返回AppView）

代码：

define(
    [
    'jquery',
    'underscore',
    'backbone',
    ],
    function() {
        console.log($);
        console.log(_);
        console.log(Backbone);
        console.log("inside of the app js file");
        return AppView = Backbone.View.extend({
            initialize: function() {
            console.log("inside of appview initialize");
        },
    });
});

<强>控制台

使用该代码，这是控制台输出：

function ( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
    } [app.js:8]

function (a){return new m(a)} [app.js:9]

Object [app.js:10]

inside of the app js file [app.js:11]

done w/ requires main.js:21

function ( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
} [main.js:22]

function (){a.apply(this,arguments)} [main.js:23]

inside of appview initialize [app.js:15]

Answer 2

我会回避使用分支版本的主干和下划线。已经添加了一个“shim”配置选项来requirejs来处理本机不支持AMD的第三方库。这样可以更轻松地更新到库的最新版本。

http://requirejs.org/docs/api.html#config-shim

以下是一个例子：

require.config({
  paths: {
    jquery: "libs/jquery",
    underscore: "libs/underscore",
    backbone: "libs/backbone"
  },
  shim: {
    underscore: {
      exports: '_'
    },
    backbone: {
      deps: ["underscore", "jquery"],
      exports: "Backbone"
    }
  }
});

Answer 3

您可能没有正确的参考骨干和_，这可能会对您有所帮助：

Loading Backbone and Underscore using RequireJS

更多： http://requirejs.org/docs/api.html#config-shim

无法让requirejs包含Backbonejs

3 个答案: