无法让requirejs包含Backbonejs

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