I have a project with a lot of libraries
require.config({
shim: {
'fileB' : { deps: ['fileS'] },
'angular' : { exports: 'angular', deps: ['fileB'] },
'uiRouter' : { deps: ['angular'] },
'ngAnimate' : { deps: ['angular'] },
'lodash' :{ deps:['angular'] },
'angular-lodash' : { deps:['angular', 'lodash'] }
},
paths: {
'angular' : '../libs/angular.min',
'ngAnimate' : '../libs/angular-animate.min',
'uiRouter' : '../libs/angular-ui-router.min',
'fileS' : 'fileS',
'lodash' : '../libs/lodash.min',
'angular-lodash': '../libs/angular-lodash'
},
deps: [
'./start'
]
});
My goal is to put everything in one file except the files in the libs directory
requirejs: {
compile: {
options: {
almond: true,
replaceRequireScript: [
{
files: ['dist/index.html'],
module: 'config',
modulePath: 'config'
}
],
name: 'config',
mainConfigFile: 'tmp/config.js',
baseUrl: 'tmp',
out: 'dist/script.min.js'
}
}
},
The problem is, when I try to exclude angular it excludes everything. I want to have the files in the dist directory, everything in the temp should be uglified into one file and libs seperate files.
Is this possible? Thanks for the help.
Related
In my app, I am using requirejs with handlbars plugin(https://github.com/SlexAxton/require-handlebars-plugin), I integrated with my app..
But I am keep getting an error, which i am not able to figureout why?
here is my error:
my require config file :
require.config({
baseUrl :'bower_components',
paths: {
"scripts":'../scripts',
"jquery":"jquery/jquery.min",
"underscore" :"underscore-amd/underscore-min",
"backbone" :"backbone-amd/backbone-min",
"marionette":"backbone.marionette/lib/backbone.marionette.min",
"text" : "requirejs-text/text",
"hbs":"require-handlebars-plugin/hbs",
"handlebars":"require-handlebars-plugin/handlebars",
'i18nprecompile' : 'require-handlebars-plugin/hbs/i18nprecompile',
'json2' : 'require-handlebars-plugin/hbs/json2'
},
shim: {
"jquery": {
exports: '$'
},
"underscore":{
exports: '_'
},
"backbone": {
deps: ["jquery","underscore"],
exports: "Backbone"
},
"marionette": {
deps: ["jquery", "underscore", "backbone"],
exports: "Marionette"
}
}
});
require(["scripts/main"]);
my view file :
define([
'jquery',
'underscore',
'backbone',
'hbs!../template/login1Template.hbs'],
function ($,_,Bacbone,hbr) {
"use strict";
socialApp = window.socialApp || {};
socialApp.loginView = Bacbone.View.extend({
template:_.template(loginTemplate),
initialize:function(){
var temp = hbr({adjective: "favorite"});
}
});
return socialApp.loginView;
}
);
Any one help me to sort this issue please? it's sucking my time here!
Thanks for all...
The problem is, I use bower.js to install all my moudles. in the plugin, it's not installed properly. some of files are missing from the git. manually i updated and the handlebars loading now.
I am using requirejs-backbone to display list of users:However I'm getting this "Uncaught Object" error when i load the page. I debugged it and saw its my main.js that is causing the trouble. Below is my main.js.
require.config({
baseUrl: 'scripts/modules/sub-accounts/',
paths: {
'underscore': '../../libs/underscore',
'backbone': '../../libs/backbone',
'views': 'views',
'collections': 'collections',
'models': 'models',
'templates': 'templates'
},
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['jquery', "underscore"],
exports: "Backbone"
},
'bootstrap': {
deps: ['jquery']
}
}
});
require([
'jquery',
'underscore',
'backbone',
'router'
], function ($, _, backbone, router){
SubAccountRouter.initialize();
});
EDIT:::
This is the place(init.js file) where im initializing all my scripts, apps and other libraries apart from the config in main.js. I'm not sure is that might be causing the issue:
script : [
'/scripts/libs/require/require.js',
'/scripts/libs/require/text.js',
'/scripts/libs/underscore.js',
'/scripts/libs/backbone.js',
'/scripts/modules/sub-accounts/main.js',
'/scripts/modules/sub-accounts/router.js'
]
Any ideas as to where i might be going wrong??
I have a problem with an r.js build in my app loader.
Unbuild mode is working perfect but after a build with r.js the variables in app_loader.js#L7 bb and hb are undefined. So far I work around by using global variables Handlebars und Backbone but what is wrong with this shim?
I have removed your global references and tested this locally. It works.
build.js - updated to use app_main as config file
({
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 - updated to simplify paths
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) { ... });
I think the error is because in your shim you have exported backbone and handlebar as Backbone and Handlebars respectively,
backbone : {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
handlebars:{
deps: ['jquery'],
exports: 'Handlebars'
},
and in your app_loader.js#L7 you are using it as bb and hb.
Either in shim export it as bb and hb:
backbone : {
deps: ['underscore', 'jquery'],
exports: 'bb'
},
handlebars:{
deps: ['jquery'],
exports: 'hb'
},
or use Backbone and Handlebars in app_loader.js#L7 instead of bb and hb:
define("app_loader",[
"jquery",
"underscore",
"backbone",
"handlebars",
"order!assets/js/app_routes.js"
], function(jQuery, underscore, Backbone, Handlebars, router){
I am also new to backbone and requirejs but it should help.
I have forked your github project and use grunt requirejs to run the optimization.
I manage to run the site and didn't notice any console errors in Chrome.
I took your project and noticed the errors in your build. I then made some changes to your app_main.js file as follows. Let me know if this solves your issues? Solved mine.
// 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();
});
I have an issue to make two different builds on my app directory. I am using
Backbone+CoffeeScript, so it's a lot of staff in the folders.
I used build.js to generate one big result.js and load it on the page.
Now i want to make two different router.coffee files to include router1.coffee in one build(excluding router2.coffee) and vise versa to the other build.
Project structure:
app/
models/
model.coffee
collections/
collection.coffee
.............
lib/
settings.coffee
router1.coffee
router2.coffee
main.js
build.js
build/
result.js
My build.js:
({
baseUrl: ".",
name: "main",
out: "../build/result.js",
stubModules: ['cs', 'text'],
exclude: ['coffee-script'],
fileExclusionRegExp: /^views$/,
preserveLicenseComments: false,
optimize: "none",
paths: {
"cs" : "libs/cs",
'coffee-script' : 'libs/coffee-script',
'jquery' : 'libs/jquery-1.9.1',
'jquery_ui' : 'libs/jquery-ui.custom.min',
'backbone' : 'libs/backbone',
'backbone-relational': 'libs/backbone-relational',
//require.js dependency
"requireLib" : "libs/require"
},
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'jquery_ui' : ['jquery'],
'fileDownload' : ['jquery']
},
include: "requireLib"
})
How can i have result1.js with only router1 included, and result2.js with only router2 included?
You should use two build.js file, one for each router.
How can I load Backbone.io, Backbone, and socket.io with Require.js's shim config?
It seems like everything else is loading just fine, just that when I attempt to run Backbone.io.connect() I get "Backbone is not defined". Backbone.io is served the same way socket.io is from the /socket.io directory that the socket.io server creates.
requirejs.config({
baseUrl: 'javascripts/lib',
paths: {
jquery: 'jquery.min',
bootstrap: 'bootstrap.min'
},
shim : {
'underscore': {
exports: '_'
},
'backbone': {
deps: ["underscore", "jquery"],
exports: 'Backbone'
},
'bootstrap': {
deps: ["jquery"]
}
}
})
requirejs(['jquery',
'underscore',
'backbone',
'bootstrap',
'../socket.io/socket.io.js',
'../socket.io/backbone.io.js'
], function($,
_,
Backbone,
bootstrap){
Backbone.io.connect();
}
small update:
It seems like Backbone is defined just fine in the main requirejs function, it's just that backbone.io needs Backbone to be defined before it's initialized. How can I initialize the Backbone object and THEN the backbone.io library so it can do it's thing?
Try including backbone in your path
paths: {
jquery: 'jquery.min',
bootstrap: 'bootstrap.min',
underscore: '<name of underscore file>',
backbone: '<name of backbone file>'
},
I think that should do it. Remember not to include the .js in the file name.
Also, if backbone.io depends on backbone you may need to add the dependencies under shim.
shim : {
'underscore': {
exports: '_'
},
'backbone': {
deps: ["underscore", "jquery"],
exports: 'Backbone'
},
'bootstrap': {
deps: ["jquery"]
},
'backbone.io': {
deps: ["backbone"]
}
}
Here's how it ended up working for me:
Thanks landland, your answer helped the most.
requirejs.config({
baseUrl: 'javascripts/lib',
paths: {
jquery: 'jquery.min',
bootstrap: 'bootstrap.min',
backbone: 'backbone',
underscore: 'underscore',
socketio: '../../socket.io/socket.io',
backboneio: '../../socket.io/backbone.io'
},
shim : {
'underscore': {
exports: '_'
},
'backbone': {
deps: ["underscore", "jquery"],
exports: 'Backbone'
},
'bootstrap': {
deps: ["jquery"],
exports: 'bootstrap'
},
'backboneio': {
deps: ["backbone", "socketio"]
}
}
})
requirejs(['jquery',
'underscore',
'backbone',
'bootstrap',
'socketio',
'backboneio'
], function($,
_,
Backbone,
bootstrap,
titlealert,
waitForImages){
}