Backbone.js 在r.js构建后，在应用程序加载器中未定义主干和把手

我的应用程序加载程序中存在问题

---

Unbuild模式工作正常，但在使用r.js构建之后，bb和hb中的变量

未定义

。到目前为止，我使用全局变量handlebar和Backbone解决了这个问题，但这有什么错？

我认为错误是因为在垫片中，您分别将Backbone和handlebar导出为Backbone和handlebar

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

在你的app_loader.js#L7中，你将其用作bb和hb

在垫片中，将其导出为bb和hb：

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

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

或者使用app_loader.js#L7中的主干和把手，而不是bb和hb：

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

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

---

我也不熟悉主干和requirejs，但它应该会有所帮助

我已经完成了您的github项目，并使用grunt requirejs来运行优化

---

我成功运行了该站点，但没有注意到Chrome中的任何控制台错误。

我接受了您的项目，并注意到了您的构建中的错误。然后我对你的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(); 
});

---

我已经删除了您的全局引用并在本地进行了测试。它起作用了

build.js-更新为使用app\u 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;  
    ...
});

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

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

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

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

app_loader.js

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

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

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

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

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

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(["app_loader"], function(loader){
    var $ = loader.$, Backbone = loader.Backbone;  
    ...
});

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

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

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

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

demo.model.js

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

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

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

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

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

demo.view.js

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

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

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

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

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

---

我试图运行你的r.js构建，但得到了以下结果：

跟踪：app_main Error:enoint，没有这样的文件或目录'/home/explunit/TESTPROJECT/www root/assets/js/mvc/./../../../../mvc/demo.html'

另外，我不理解你使用不推荐的

订单插件。你能解释一下吗？我刚刚从头克隆并执行了/\u build/\u page.sh。这里运行良好。
订单没有特殊原因用法。它基于internet上现有的代码示例。hb和bb变量名是一种变通方法。您在垫片中的更改导致主干和把手即使在未构建模式下也不会导出。是的，这是真的。然后使用第二个选项。这个项目在构建之后可以工作，因为我按照前面所描述的那样工作。我已经更新了示例项目并添加了console.log消息。在未构建模式下定义时，您将在构建模式下nitoce now Backbone undefined app_main.js:6 Handlebar undefined app_main.js:6。不幸的是，它不会更改任何内容。您确定正在刷新，并且您的浏览器没有缓存上一个构建吗。检查了几次，它确实解决了在构建应用程序时未定义主干的问题。我的Chrome浏览器不缓存加载的开发工具。那么，您遇到了什么错误？主干未定义？你扔的是什么？