После сборки r.js Backbone и Handlebars не определены в App Loader

Question

У меня проблема со сборкой r.js в моем загрузчике приложений.

Режим unbuild работает отлично, но после сборки с помощью r.js переменные в app_loader.js # L7 bb и hb undefined, До сих пор я работаю с помощью глобальных переменных Handlebars и Backbone, но что не так с этой прокладкой?

Answer 1

Я удалил ваши глобальные ссылки и проверил это локально. Оно работает.

build.js - обновлен для использования app_main в качестве файла конфигурации

({
    optimizeCss: "standard",
    removeCombined: true,
    preserveLicenseComments: false,
    appDir: "../www-root-dev",
    dir: "../www-root",
    keepBuildDir: false,
    optimize: "uglify2",
    mainConfigFile: "../www-root-dev/assets/js/app_main.js",
    modules: [{
        name: "app_main"
    }]
})

app.js

define(["app_loader"], function(loader){
    var $ = loader.$, Backbone = loader.Backbone;  
    ...
});

app_loader.js

define(["jquery","underscore","backbone","handlebars","app_routes"],
function($, _, Backbone, Handlebars, router){ 
    return {
        $: $.noConflict(),
        _: _,
        Backbone: Backbone,
        router: router,
        Handlebars: Handlebars
    };
});

app_main.js - обновлен для упрощения путей

require.config({
    baseUrl: './assets/js',
    paths: {
        mvc: '../../mvc'
    },
    shim: {
        underscore: {
            exports: '_' //the exported symbol
        },
        backbone : {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone' 
        },
        handlebars: {
            deps: ['jquery'],
            exports: 'Handlebars'
        }
    }
});

require(['app'], function(App){  
    App.initialize(); 
});

app_routes.js

define(["jquery", "underscore", "backbone", "mvc/demo.view.js", "mvc/demo.model.js"], function($, _, Backbone, DemoView, DemoModel) { ... });

demo.model.js

define(["backbone"], function(Backbone) { ... });

demo.view.js

define(["jquery","backbone","text!mvc/demo.html"], function($, Backbone,demoTemplate) { ... });

Answer 2

Я раздвоил ваш проект на github и использую grunt requirejs для запуска оптимизации.

Мне удалось запустить сайт и не заметил никаких ошибок консоли в Chrome.

Answer 3

Я думаю, что ошибка в том, что в вашей шимме вы экспортировали позвоночник и руль как Backbone и Handlebar соответственно,

backbone : {
         deps: ['underscore', 'jquery'],
         exports: 'Backbone' 
       },
handlebars:{
         deps: ['jquery'],
         exports: 'Handlebars'
       },

и в вашем app_loader.js#L7 вы используете его как bb и hb.

Либо в shim экспортируйте его как bb и hb:

backbone : {
             deps: ['underscore', 'jquery'],
             exports: 'bb' 
           },
handlebars:{
             deps: ['jquery'],
             exports: 'hb'
           },

или используйте Backbone и Handlebars в app_loader.js#L7 вместо bb и hb:

define("app_loader",[ 
  "jquery",
    "underscore",
  "backbone",
  "handlebars",
    "order!assets/js/app_routes.js"
], function(jQuery, underscore, Backbone, Handlebars, router){ 

Я также новичок в магистрали и requirejs, но это должно помочь.

Answer 4

Я взял ваш проект и заметил ошибки в вашей сборке. Затем я сделал некоторые изменения в вашем файле app_main.js следующим образом. Дайте мне знать, если это решит ваши проблемы? Решил мой.

// Require.js allows us to configure shortcut alias
// Their usage will become more apparent futher along in the tutorial.
require.config({

    shim: {
        underscore: {
            exports: '_' //the exported symbol
        },
        backbone : {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone' 
        },
        handlebars: {
            exports: 'Handlebars'
        }

    },

    paths: {
        appLoader:  'app_loader',
        jquery:     'jquery',
        underscore: 'underscore',
        backbone :  'backbone' ,
        handlebars: 'handlebars'

    }
});

require([
'app'
], function(App){  
    App.initialize(); 
});