Question

我最近加入了一个使用Backbonejs构建的项目（使用Marionette进行视图渲染）+ nodejs。他们还使用requirejs来加载backbonejs文件。我想在此阶段补充说，我以前从未使用过backbonejs或者requirejs，因此我很难解决我后面描述的问题。

一些代码可以帮助解释我遇到的问题（所有这些代码都已经由以前的开发人员编写）

文件夹结构：

/public
 /js
  /collection (consists all Backbone.js collections files)
  /lib
   /bower_components
    /backone
    /marionette
    /etc
  /models (consists all Backbone.js models files)
  /views (consists all Backbone.js view files)
  /main.js
  /main.build.js
  /app.js
  /controller.js
  /router.js

我认为与问题相关的文件中的代码：

main.js

requirejs.config({
    paths: {
        'async': 'lib/bower_components/requirejs-plugins/src/async',
        'jquery': 'lib/bower_components/jquery/dist/jquery.min',
        'underscore': 'lib/bower_components/underscore/underscore-min',
        'lodash': 'lib/bower_components/lodash/dist/lodash.min',
        'backbone': 'lib/bower_components/backbone/backbone',
        'marionette': 'lib/bower_components/marionette/lib/backbone.marionette.min',
        'markercluster':'lib/markercluster',
        'jquerymobile': 'lib/jquery.mobile-1.4.0.min',
        'hogan': 'lib/template-2.0.0.min',
        'templates': '/templates',
        'real': 'lib/mainjs',
        'touch': 'lib/jquery.touchSwipe.min',
        'mouse': 'lib/jquery.mousewheel',
        'moment': 'lib/moment-2.5.1.min',
        'humanize': 'lib/bower_components/humanize-plus/public/dist/humanize.min',
        'validator': 'lib/bower_components/validator-js/validator.min',
        'real': 'lib/mainfile'
    },
    shim: {
        backbone: {
            deps: ["underscore"]
        },
        marionette: {
            deps: ["backbone"]
        },
        templates: {
            deps: ["hogan", "jquery"]
        },
        real: {
            deps: ["jquery", "jquerymobile", "touch", "mouse"]
        },
        markercluster: {
            exports: "MarkerClusterer"
        },
        humanize: {
            exports: "humanize"
        }
    },
    waitSeconds: 0
});

define('gmaps', ['async!http://maps.google.com/maps/api/js?v=3&key=AIzaSyBiV8f88yLWJ_IMSdP1fVNO1-gt3eLVSgg&sensor=true&callback=gMapsCallback'], function(){
// define('gmaps', ['http://maps.google.com/maps/api/js?v=3&sensor=false'], function(){
    return window.google.maps;
});

require(['app', 'templates', 'real'], function(app) {
    app.start({
        version: "0.9.9"
    });
});

main.build.js

({
    baseUrl: ".",
    name: "main",
    wrapShim: true,
    out: "main-built.js"
})

app.js

define(['underscore', 'controller', 'router', 'models/Cache', 'views/RootView'], function(_, Controller, Router, Cache, RootView) {
    var Application = Marionette.Application.extend({
        propertyListPageSize: 3,
        initialize: function() {
            _.templateSettings = { interpolate : /\{\{(.+?)\}\}/g };
        },
        onStart: function(options){
            new RootView();
            this.controller = new Controller();
            this.router = new Router({controller: this.controller});
            this.cache = new Cache();
            this.context = {};
            //this.evHistory = [];//@todo remove once BB/marionette navigation is in place
            if(Backbone.history) Backbone.history.start({ pushState: false });
            if(Backbone.history.fragment === "") this.navigate('home');
        },
        navigate: function(fragment, trigger, replace){
            this.router.navigate(fragment, {trigger:trigger, replace:replace});
        },
        back: function() {
            window.history.back();
        }
    });
    app = new Application();
    return app;

});

rootView.js

define(['marionette', 'views/HomeView', 'views/HeaderView', 'views/FooterView', 'views/MenuView', 'views/VideoView', 'views/LocationSearchView', 'views/LoginView', 'views/FindView', 'views/ServicesView', 'views/ValueView', 'views/PropertyListView', 'views/SideBySideView', 'views/ConfirmRegistrationView', 'views/ForgotPasswordView', 'views/CreateAccountView', 'views/UserHomeView', 'views/MyBrokerView', 'views/GiveFeedbackView', 'views/SeeFeedbackView', 'views/ViewingScheduleView', 'views/MyViewingsSummaryView', 'views/MyAccountView', 'views/ViewingConfirmView', 'views/ValueAddressPropertyListView'],
    function(Marionette, HomeView, HeaderView, FooterView, MenuView, VideoView, LocationView, LoginView, FindView, ServicesView, ValueView, PropertyListView, SideBySideView, ConfirmRegistrationView, ForgotPasswordView, CreateAccountView, UserHomeView, MyBrokerView, GiveFeedbackView, SeeFeedbackView, ViewingScheduleView, MyViewingsSummaryView, MyAccountView, ViewingConfirmView, ValueAddressPropertyListView) {
    var RootView = Marionette.LayoutView.extend({

    ...some view code

});

用例I我试图解决：

因此，当我在浏览器中访问该站点时，我会在调试器中注意到它在开头加载所有js文件。在加载过程中，我的网站是空白的，用户必须等待一段时间才能使用该网站。

所以我能够理解的是，当应用程序启动时＃39;在main.js中，app.js创建了一个rootView.js实例，该实例又将所有视图列为依赖项。这会触发所有其他视图的下载请求，这反过来会解决他们自己的依赖关系并下载所有相关的模型和集合。因此，当用户访问该站点时，所有文件都被下载。

解决方案我一直在尝试：

由于正在使用requirejs，我尝试使用r.js来优化和组合所有js文件以减少下载次数。

问题我遇到了：

当我运行r.js.我收到以下错误

Tracing dependencies for: main
Error: ENOENT: no such file or directory, open '/var/node_projects/rm/rm.src.server/src/public/js/underscore.js'
In module tree:
    main
      app

Error: Error: ENOENT: no such file or directory, open '/var/node_projects/rm/rm.src.server/src/public/js/underscore.js'
In module tree:
    main
      app

    at Error (native)

如果我将underscore.js文件直接添加到错误中的指定路径，那么我会得到marionette.js的相同错误。我认为发生的事情是，app.js无法识别垫片的依赖关系，因此它试图直接在错误中的指定路径找到文件。

我尝试过的事情： - 我在main.build.js文件中添加了wrapShim：true但是没有帮助

老实说，我已经坐了几天了，而且我不确定接下来我能做什么，因此这篇文章。

任何帮助/指示都将不胜感激。

Answer 1

您需要在构建文件中包含相同的填充程序配置，因为wrapShim是不够的。

如果在运行时期间在应用程序中使用了shim config，请在此处复制配置。必要时使用shim配置，以便shim的依赖项包含在构建中。使用“mainConfigFile”是传递此信息的更好方法，因此它只列在一个地方。但是，如果mainConfigFile不是一个选项，则可以在构建配置中内联shim配置。

https://github.com/jrburke/r.js/blob/master/build/example.build.js

r.js无法解析shim中提到的依赖项

1 个答案: