无法让 requirejs 包含 Backbonejs [英] Cannot get requirejs to include Backbonejs

问题描述

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

I am trying to modularize my Backbone app through Requirejs, but I cannot seem to get Requirejs to include Backbone. Here is my main.js that gets included from the index page:

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:

Here is my app.js that gets included from the above file:

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 控制台中打印出来:

The following information gets printed out in my Google Chrome console:

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 的定义无效.它们显示为未定义.知道为什么会这样吗?

The definition for $ works, but the definitions for _ and Backbone do not work. They come up as undefined. Any idea why this is happening?

推荐答案

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

I recommend you use the version of requireJS that has jQuery bundled. It will save you much setup pain. You can read the details here: http://requirejs.org/docs/jquery.html and download the files here: https://github.com/jrburke/require-jquery

用他们自己的话来说:

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

With RequireJS, scripts can load in a different order than the order they are specified. This can cause problems for jQuery plugins that assume jQuery is already loaded. Using the combined RequireJS + jQUery file makes sure jQuery is in the page before any jQuery plugins load.

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

This should take care of loading jQuery properly with requireJS:

<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文件被定义为模块，你只能在回调中加载它们后检索它们.所以 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");
        },
    });
});

控制台

代码到位后，这是控制台输出:

With that code in place, this is the console output:

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]

这篇关于无法让 requirejs 包含 Backbonejs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！