Javascript require.js模块未正确加载

我有一个引导文件，它定义require.js路径，并加载应用程序和配置模块

// Filename: bootstrap

// Require.js allows us to configure shortcut alias
// There usage will become more apparent futher along in the tutorial.
require.config({
    paths: {
        bfwd: 'com/bfwd',
        plugins: 'jquery/plugins',
        ui: 'jquery/ui',
        jquery: 'jquery/jquery.min',
        'jquery-ui': 'jquery/jquery-ui.min',
        backbone: 'core/backbone.min',
        underscore: 'core/underscore.min'
    }
});
console.log('loading bootstrap');
require([
    // Load our app module and pass it to our definition function
    'app',
    'config'
], 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
    console.log('initializing app');
    App.initialize();
});

app.js会像它应该的那样加载，它的依赖项也会加载。调用它的define回调，并将所有正确的依赖项作为参数传递。不会抛出任何错误。然而，在引导的回调中，应用是未定义的！不传递任何参数。这是什么原因造成的？这是我的应用程序文件（为空间修改）

---

这是一个可能有助于您开始的简单示例：

我创建了一个非常简单的模块：

并将其用于此小提琴中，仅将jQuery作为一个额外的依赖项：

require.config({
路径：{
“jquery”：”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min",
“应用程序”：https://gist.github.com/raw/c556b6c759b1a41dd99d/20d0084c9e767835446b46072536103bd5aa8c6b/gistfile1.js"
},
等待秒：40
});
你好
需要（[“jquery”，“app”]，
函数（$，应用程序）{
警报（$.fn.jquery+“\n”+$（“#消息”）.text（））；
app.alert（“来自app的你好”）；
}
);

好的，我也遇到了同样的问题，关键是您定义的jquery路径别名。事实证明，RequireJS对jquery有一些特殊的处理。如果您使用jquery模块名称，它将在这里发挥一点魔力

取决于jquery.min.js中的内容，它可能会导致一些问题，而且您的jquery插件也可能有问题。以下是来自RequireJS源代码的相关代码行：

    if (fullName) {
        //If module already defined for context, or already loaded,
        //then leave. Also leave if jQuery is registering but it does
        //not match the desired version number in the config.
        if (fullName in defined || loaded[id] === true ||
            (fullName === "jquery" && config.jQuery &&
                config.jQuery !== callback().fn.jquery)) {
            return;
        }

        //Set specified/loaded here for modules that are also loaded
        //as part of a layer, where onScriptLoad is not fired
        //for those cases. Do this after the inline define and
        //dependency tracing is done.
        specified[id] = true;
        loaded[id] = true;

        //If module is jQuery set up delaying its dom ready listeners.
        if (fullName === "jquery" && callback) {
            jQueryCheck(callback());
        }
    }

对我来说，我已经设置好了一个名为/libs/jquery/jquery.js的文件，它返回jquery对象（只是RequireJS的包装器）。我最后做的只是将路径别名从

jquery

更改为

$jquery

。这有助于避免意外的魔法行为

---

在我阅读的文章中，他们使用了

jQuery

，这也很有效。

据我所知，您可能应该在app.js define方法中删除“app”字符串

// Filename: app.js
define([
    'jquery',
    'underscore',
    'backbone',
    'jquery-ui',
    'bfwd/core',
    'plugins/jquery.VistaProgressBar-0.6'
], function($, _, Backbone){
    ...
);

---

这就是我使用requirejs和主干网的方式：

首先，使用config定义主文件或引导文件：

// bootstrap.js
require.config({
    paths: {
        text: 'lib/text',
        jQuery: 'lib/jquery-1.7.2.min',
        jqueryui: 'lib/jquery-ui-1.8.22.custom.min',
        Underscore: 'lib/underscore-1.3.3',
        Backbone: 'lib/backbone-0.9.2'
    },

    shim: {
        'Underscore': {
            exports: '_'
        },

        'jQuery': {
            exports: 'jQuery'
        },

        'jqueryui': {
            exports: 'jqueryui'
        },

        'Zepto': {
            exports: '$'
        },

        'Backbone': {
            deps: ['Underscore', 'Zepto'],
            exports: 'Backbone'
        }
});

define(function (require) {
    'use strict';

    var RootView = require('src/RootView');
    new RootView();
});

然后，我使用加载脚本。我发现通过

var

声明定义依赖性比数组表示法更容易

// rootview.js
define(function (require) {

    'use strict';

    var $ = require('Zepto'),
    Backbone = require('Backbone'),
    LoginView = require('./LoginView'),
    ApplicationView = require('./ApplicationView'),
    jQuery = require('jQuery').noConflict();



    return Backbone.View.extend({

        // append the view to the already created container
        el: $('.application-container'),

        initialize: function () {
            /* .... */
        },

        render: function () {
                        /* .... */
        }
    });
});

---

希望有帮助

这有点晚了，但我刚刚遇到了这个问题。我的解决方案可以在这里找到：

我出于另一个原因发布了这个问题，问为什么我的修复程序首先起作用。埃尔克兰斯提供了完美的答案。长话短说，由于javascript自动插入分号，可能会出现未定义的：

如果您尝试将花括号的位置从下面更改为return语句之后的直接位置，我认为您的问题将消失

// Filename: app.js
define(
.
.
.

    function($, _, Backbone){
        var initialize = function()
        {
            //initialize code here
        }
        return {
            initialize: initialize
        };
    }
);

---

是否可以检查是否声明了多个版本的

define

函数？另外，通常最好使用匿名定义。因此，可能需要从模块中删除

'app'，

代码。如何检查是否声明了多个版本的

define

？此外，我也尝试过使用和不使用“app”声明不一定是诚实的！但是，如果存在两个相互竞争的定义函数，则模块的状态可能无法确定，即使它们似乎正在工作（即，传递给定义的“工厂”函数被执行）。你能试着把你的应用剥离到最底层并逐渐添加依赖项吗？我已经剥离了它的所有依赖项，但它仍然没有通过。我不能使用你问题中的代码生成相同的错误。。。你能提供更多的信息吗？一个可以重现错误的页面是一个很好的开始…删除应用程序字符串将起作用。这个模式适合我：“require（[“app”]，function（app）{app.initialize（）；}）；”将app.js写成define（['jquery']，function（$）{function initialize（）{}；return{initialize:initialize}；}）；使用应用程序字符串时，您定义的模块应返回对库的引用。像jQuery这样的库将自己定义为：'define（“jQuery”，[]，function（）{returnjquery；}）；'花括号的位置对任何情况都没有影响。阿德里安设计的括号的存在。否决我，然后留下错误信息的评论，真是恶心。在误导未来的程序员之前，请注意语言的局限性。javascript的自动分号插入特性立即结束return语句，而不是将代码包含在下一行的大括号中。应用程序的原始海报未定义。这就是为什么。我甚至在回答中说了这句话，你有没有试着读过？

// bootstrap.js
require.config({
    paths: {
        text: 'lib/text',
        jQuery: 'lib/jquery-1.7.2.min',
        jqueryui: 'lib/jquery-ui-1.8.22.custom.min',
        Underscore: 'lib/underscore-1.3.3',
        Backbone: 'lib/backbone-0.9.2'
    },

    shim: {
        'Underscore': {
            exports: '_'
        },

        'jQuery': {
            exports: 'jQuery'
        },

        'jqueryui': {
            exports: 'jqueryui'
        },

        'Zepto': {
            exports: '$'
        },

        'Backbone': {
            deps: ['Underscore', 'Zepto'],
            exports: 'Backbone'
        }
});

define(function (require) {
    'use strict';

    var RootView = require('src/RootView');
    new RootView();
});

// rootview.js
define(function (require) {

    'use strict';

    var $ = require('Zepto'),
    Backbone = require('Backbone'),
    LoginView = require('./LoginView'),
    ApplicationView = require('./ApplicationView'),
    jQuery = require('jQuery').noConflict();



    return Backbone.View.extend({

        // append the view to the already created container
        el: $('.application-container'),

        initialize: function () {
            /* .... */
        },

        render: function () {
                        /* .... */
        }
    });
});

// Filename: app.js
define(
.
.
.

    function($, _, Backbone){
        var initialize = function()
        {
            //initialize code here
        }
        return {
            initialize: initialize
        };
    }
);