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

Question

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

// 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

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

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

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 2

Ok У меня была та же проблема, ключ псевдонима 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. Это помогает избежать нежелательного магического поведения.

В original tutorial Я читаю, что они используют jQuery, который также работает.

Answer 3

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

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

Answer 4

Это, как я делаю это с requirejs и позвоночником:

первым, определить основной или загрузочный файл с конфигой:

// 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(); 
}); 

Затем я использую this syntax загрузить мои скрипты. Мне легче, чем обозначение массива, просто определять мои аргументы через объявления 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: Automatic semicolon insertion & return statements Если вы попытаетесь изменить положение фигурной скобки снизу до непосредственно после оператора возврата, я думаю, ваша проблема исчезнет.

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

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