модули require.js не загружаются должным образом

Question

У меня есть файл начальной загрузки, который определяет пути require.js и загружает модули app и config.

// 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 загружается, как и должно быть, и загружаются его зависимости. вызывается его определение, обратный вызов со всеми правильными зависимостями, передаваемыми в качестве аргументов. Ошибка не выдается. ОДНАКО, в обратном вызове загрузчика приложение не определено! аргументы не передаются. Что может быть причиной этого? Вот файл моего приложения (модифицированный для пробела)

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

Answer 1

Насколько я знаю, вам, вероятно, следует просто удалить строку 'app' в вашем методе определения app.js.

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

Answer 2

Хорошо, у меня была та же проблема, ключом является псевдоним пути 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, который также работает.

Answer 3

Это простой пример, который может помочь вам начать:

Я создал очень простой модуль:

https://gist.github.com/c556b6c759b1a41dd99d

define([], function () {
  function my_alert (msg) {
    alert(msg);
  }
  return {
    "alert": my_alert
  };
});

И использовал его в этой скрипке, только с jQuery в качестве дополнительной зависимости:

http://jsfiddle.net/NjTgm/

<script src="http://requirejs.org/docs/release/1.0.7/minified/require.js"></script>
<script type="text/javascript">
  require.config({
    paths: {
        "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min",
        "app": "https://gist.github.com/raw/c556b6c759b1a41dd99d/20d0084c9e767835446b46072536103bd5aa8c6b/gistfile1.js"
    },
    waitSeconds: 40
  });
</script>

<div id="message">hello</div>

<script type="text/javascript">
  require( ["jquery", "app"],
    function ($, app) {
      alert($.fn.jquery + "\n" + $("#message").text());
      app.alert("hello from app");
    }
  );
</script>

Answer 4

Вот как я это делаю с requirejs и магистралью:

сначала определите файл main или bootstrap с помощью 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 () {
                        /* .... */
        }
    });
});

Надеюсь, это поможет!

Answer 5

Это немного поздно, но у меня просто была эта проблема. Мое решение можно найти здесь: https://stackoverflow.com/questions/27644844/can-a-return-statement-be-broken-across-multiple-lines-in-javascript

Я опубликовал этот вопрос по другой причине, чтобы спросить, почему мое исправление сработало в первую очередь. Elclanrs дал идеальный ответ. Короче говоря, неопределенное, вероятно, появляется из-за автоматической вставки точек с запятой javascript: Автоматическая вставка точек с запятой и оператор возврата

Если вы попытаетесь изменить положение фигурной скобки с нижнего на сразу после оператора return, я думаю, что ваша проблема исчезнет.

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

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