5

我正在尝试通过 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 的定义无效。它们以未定义的形式出现。知道为什么会这样吗？

4

3 回答 3

5

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

用他们自己的话来说：

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

这应该负责使用 requireJS 正确加载 jQuery：

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

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

应用程序.js

几点注意事项：

  • 如果 JS 文件已被定义为模块，则您只能在回调中加载它们后检索它们。所以 function($, _, 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]
于 2012-06-25T05:52:16.283 回答
5

我会回避使用主干和下划线的分叉版本。在 requirejs 中添加了一个“shim”配置选项来处理不原生支持 AMD 的 3rd 方库。这使得更新到最新版本的库变得更加容易。

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"
    }
  }
});
于 2012-06-25T18:30:30.750 回答
0

您可能没有正确的参考骨干和_，也许这可以帮助您：</p>

使用 RequireJS 加载 Backbone 和 Underscore

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

于 2012-06-25T05:43:09.443 回答