我正在使用Backbone / Marrionette和AMD Require.js
我的目标是通过连接所有文件来加快Web应用程序的加载时间。我需要加载的文件越少，加载速度就越快。
我已经实现了连接/ lib文件夹中的文件。这些文件是jQuery，下划线，主干...只是普通的lib文件夹。连接后，我收到名为main.js的文件，其中包含所有文件。这是有效的，但是我无法连接我的应用程序文件。我正在使用r.js来完成任务
这是应用程序文件夹结构：
JS
app.js config.js main.js
这是我对上述结构使用的构建文件：
appDir: './',
baseUrl: './js',
dir: './dist',
modules: [
{
name: 'main'
}
],
fileExclusionRegExp: /^(r|build)\.js$/,
optimizeCss: 'standard',
removeCombined: true,
paths: {
underscore : 'lib/underscore',
backbone : 'lib/backbone',
babysitter : 'lib/backbone.babysitter',
wreqr : 'lib/backbone.wreqr',
marionette : 'lib/backbone.marionette',
handlebars : 'lib/handlebars',
jquery : 'lib/jquery',
jqueryui : 'lib/jqueryui',
text : 'lib/text',
templates : '../templates'
},
shim: {
underscore: {
exports: '_'
},
backbone: {
exports: 'Backbone',
deps: ['jquery', 'underscore']
},
jqueryui: {
exports: '$',
deps: ['jquery']
},
babysitter: {
exports: 'Backbone.Babysitter',
deps: ['backbone']
},
wreqr: {
exports: 'Backbone.Wreqr',
deps: ['backbone']
},
marionette: {
exports: 'Backbone.Marionette',
deps: [
'backbone',
'babysitter',
'wreqr',
'lib/json2'
]
},
handlebars: {
exports: 'Handlebars'
},
'lib/marionette.handlebars': {
exports: 'Marionette.Handlebars',
deps: ['handlebars', 'marionette']
},
'lib/foundation': {
exports: '$',
deps: ['jquery']
},
'lib/foundation.orbit': {
exports: '$',
deps: ['lib/foundation']
},
'lib/foundation.reveal': {
exports: '$',
deps: ['lib/foundation']
},
'lib/foundation.dropdown': {
exports: '$',
deps: ['lib/foundation']
}
},
deps: ['jquery', 'underscore']
这是app.js文件：
define([
'marionette',
'lib/marionette.handlebars',
'wreqr',
'routers/router',
'views/header_view',
'views/footer_view',
'lib/foundation',
'lib/foundation.dropdown',
'lib/foundation.orbit',
'lib/foundation.reveal',
'controllers/format_controller'
], function(
Marionette,
MarionetteHandlebars,
Wreqr,
Router,
HeaderView,
FooterView,
Foundation,
Dropdown,
Orbit,
Reveal,
FormatController
)
{
var App = new Marionette.Application();
App.addRegions({
header : '#header',
main : '#main',
footer : '#footer'
});
App.addInitializer(function(config) {
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
options.xhrFields = {
withCredentials: true
};
});
// Make the application config available via request/response.
this.reqres.setHandler('config', _.bind(function() {
return config;
}, this));
// Make the application session available via request/response.
this.reqres.setHandler('session', _.bind(function() {
return null;
}, this));
});
App.addInitializer(function(config) {
App.request = new Wreqr.RequestResponse();
new Router({vent: App.vent, reqres: App.reqres});
Backbone.history.start();
});
// Initialize any utilities that will be available through vent or reqres.
App.addInitializer(function(config) {
// String formatter for dates, etc.
new FormatController({vent: App.vent, reqres: App.reqres});
})
App.vent.on('app:main:show', function(view, isLoggedIn) {
App.header.close();
App.main.close();
App.footer.close();
var totalRegionsShown = (isLoggedIn) ? 3 : 1;
var initFoundation = _.after(totalRegionsShown, function() {
$(document).foundation();
});
if (isLoggedIn) {
var headerView = new HeaderView({
reqres: view.reqres
});
headerView.on('show', _.bind(initFoundation, this));
App.header.show(headerView);
var footerView = new FooterView();
footerView.on('show', _.bind(initFoundation, this));
App.footer.show(footerView);
}
view.on('show', _.bind(initFoundation, this));
App.main.show(view);
});
return App;
最后这是我的main.js文件：
require.config({
baseURL: '.',
urlArgs: "ver=2", //Control Client Cache. Change this value for every new release.
paths: {
underscore : 'lib/underscore',
backbone : 'lib/backbone',
babysitter : 'lib/backbone.babysitter',
wreqr : 'lib/backbone.wreqr',
marionette : 'lib/backbone.marionette',
handlebars : 'lib/handlebars',
jquery : 'lib/jquery',
jqueryui : 'lib/jqueryui',
text : 'lib/text',
templates : '../templates'
},
waitSeconds: 60,
shim: {
underscore: {
exports: '_'
},
backbone: {
exports: 'Backbone',
deps: ['jquery', 'underscore']
},
jqueryui: {
exports: '$',
deps: ['jquery']
},
babysitter: {
exports: 'Backbone.Babysitter',
deps: ['backbone']
},
wreqr: {
exports: 'Backbone.Wreqr',
deps: ['backbone']
},
marionette: {
exports: 'Backbone.Marionette',
deps: [
'backbone',
'babysitter',
'wreqr',
'lib/json2'
]
},
handlebars: {
exports: 'Handlebars'
},
'lib/marionette.handlebars': {
exports: 'Marionette.Handlebars',
deps: ['handlebars', 'marionette']
},
'lib/foundation': {
exports: '$',
deps: ['jquery']
},
'lib/foundation.orbit': {
exports: '$',
deps: ['lib/foundation']
},
'lib/foundation.reveal': {
exports: '$',
deps: ['lib/foundation']
},
'lib/foundation.dropdown': {
exports: '$',
deps: ['lib/foundation']
}
},
deps: ['jquery', 'underscore']
});
require(['app', 'backbone', 'config'], function(App, Backbone, Config) {
var runEnvironment = "stg";
console.log(Config[runEnvironment]);
console.log("Running environment is: " + runEnvironment);
App.start(Config[runEnvironment]);
});
在给定应用程序结构的情况下，是否可以执行我需要执行的操作，或者是否需要重新组织应用程序？
让我再说一遍，给定的build.js给我整个lib文件夹连接起来。所以我已经大大加快并减少了近15个java文件。但是，视图，模型，控制器，路线......根本没有触及。
答案 0 :(得分：0)
看看https://github.com/archfirst/keel。
我们正在为所有Backbone应用程序使用Keel框架。检查gruntfile。这是遵循类似的文件夹结构，并处理优化。