On build of this requirejs config using grunt-contrib-requirejs,
require.config({
baseUrl : "js",
shim : {
'ember' : {
deps : ['handlebars', 'jquery'],
exports : 'Ember'
},
'bootstrap' : ['jquery'] ,
'ember-data' : ['ember'],
'handlebars' : {
exports : 'Handlebars'
}
},
paths : {
/* APPLICATION */
'App' : 'app/ember-mock/app',
'router' : 'app/ember-mock/router',
'helper' : 'app/ember-mock/helper',
'module' : 'app/ember-mock/module',
'store' : 'app/ember-mock/store',
/* LIBRARIES */
*****
***** //other deps goes here
*****
},
**** //other options goes here
});
require([
'App',
'store',
'router',**** //other requires goes here
], function(){
});
my gruntfile.js file ,
module.exports = function(grunt) {
'use strict';
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
requirejs : {
compile : {
options : {
baseUrl : 'js',
name : 'app/ember-mock/configuration/config',
mainConfigFile : 'js/app/ember-mock/configuration/config.js',
out : 'build/js/build.js',
optimize : 'uglify2',
inlintText : true,
findNestedDependencies : true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('default', [ 'requirejs' ]);
};
And my router.js file
define([ "App" ], function(EmberMockApp) {
EmberMockApp.Router.map(function() {
this.resource("app", {
path : "/"
});
this.resource('home');
this.resource('about');
this.resource('blog');
this.resource('connect');
});
});
the router.js file is not traced as dependency by grunt-contrib-requirejs and skipped. Because of this no custom routers are registerd in ember app so emberjs is looking for default routes, so how to let grunt-contrib-require trace for router.js.
Related
Ok, there is a bunch of questions with similar titles, but none of them helped me solve my problem so here it is.
I am trying to use Angular with RequireJS; I am getting the error message Uncaught TypeError: Cannot read property 'module' of undefined which is referring to the angular object within the angular-routes.js file. This suggests to me that requireJS is trying to load angular-routes before angular has loaded. I was under the impression that this wouldn't happen because I have set 'angular-route' as dependant on 'angular' within the shim. Can anyone spot what I am doing wrong here?
// Setup requireJS
require.config({
baseUrl : "scripts",
packages : [
{ "name":"angular", "location":"../bower_components/angular", "main":"angular"},
{ "name":"angular-route", "location":"../bower_components/angular-route", "main":"angular-route"},
{ "name":"angular-animate", "location":"../bower_components/angular-animate", "main":"angular-animate"},
{ "name":"angular-storage", "location":"../bower_components/angular-storage/dist", "main":"angular-storage"},
{ "name":"jquery", "location":"../bower_components/jquery/dist", "main":"jquery"}
],
shim:{
'angular' : { exports : 'angular', deps : ['jquery'] },
'angular-route' : { deps : ['angular'] },
'angular-animate' : { deps : ['angular'] },
'angular-storage' : { deps : ['angular'] },
}
});
// Load app files
function loadApp($, app)
{
angular.element(document).ready(function(){
angular.bootstrap(document, ['mealPlannerApp']);
});
}
requirejs(['app'], loadApp);
My app.js file is as follows
(function() {
// Declare AMD module with dependencies
define(['angular', 'angular-route', 'routes'],
function(config)
{
var app = angular.module('mealPlannerApp', ['ngRoute', 'ngAnimate', 'ngAnimate']);
app.config(config);
});
}());
Packages are great for your internal packages, I haven’t tried to load main AngularJS files as them.
Please read http://jonathancreamer.com/require-js-packages-for-building-large-scale-angular-applications/ for some better clarification and examples than change config section to something like this. Major change is replacement of packages with paths
Please also consider to change variables to camelCase style
require.config({
paths: {
angular: '../bower_components/angular/angular',
'angular-route': '../bower_components/angular-route/angular-route',
'angular-animate': '../bower_components/angular-route/angular-animate',
'angular-storage': '../bower_components/angular-route/angular-storage'
},
shim: {
'angular' : { exports : 'angular', deps : ['jquery'] },
'angular-route' : { deps : ['angular'] },
'angular-animate' : { deps : ['angular'] },
'angular-storage' : { deps : ['angular'] },
},
priority: [
"angular"
]
});
I'm trying to use the r.js optimiser for the first time.
My main file looks like this:
/*--- Require.js: the main module loader ---*/
require.config({
baseUrl: 'assets/js',
waitSeconds: 0,
paths : {
jquery : '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min',
jqueryui : '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min',
underscore : 'vendor/underscore/underscore-min',
backbone : 'vendor/backbone/backbone',
routefilter : 'vendor/backbone.routefilter/backbone.routefilter',
marionette : 'vendor/marionette/marionette',
tpl : 'vendor/require/tpl',
async : 'vendor/async/async',
require_async : 'vendor/require/require_async',
modernizr : 'vendor/modernizr/modernizr.custom.15872',
hello : 'vendor/hello/hello',
facebook : 'vendor/hello/facebook',
google : 'vendor/hello/google',
moment : 'vendor/moment/moment',
$dropdown : 'vendor/jquery.dropdown/jquery.dropdown',
spin : 'vendor/spin/spin',
selectBoxIt : 'vendor/selectBoxIt/selectBoxIt',
maskedinput : 'vendor/maskedinput/maskedinput',
multidatespicker : 'vendor/multidatespicker/jquery-ui.multidatespicker'
//markerclusterer : 'vendor/markerclusterer/markerclusterer'
},
shim : {
underscore: {
exports: '_'
},
backbone: {
deps : ['jquery', 'underscore'],
exports : 'Backbone'
},
marionette: {
deps : ['jquery', 'underscore', 'backbone'],
exports : 'Marionette'
},
routefilter: {
deps : ['marionette', 'backbone', 'underscore', 'jquery'],
exports : 'Routefilter'
},
selectBoxIt: {
deps : ['jquery', 'jqueryui'],
exports : 'SelectBoxIt'
},
multidatespicker: {
deps : ['jquery', 'jqueryui'],
exports : 'MultidatesPicker'
},
facebook: {
deps : ['hello'],
exports : 'Facebook'
},
google: {
deps : ['hello'],
exports : 'Google'
}
//markerclusterer: {
// exports : 'Markerclusterer'
//}
},
config: {
moment: {
noGlobal: true
}
}
});
//--- Define Google maps to make it globally accessible throughout the application ---//
define('gmaps', ['require_async!https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry,places&key=AIzaSyDRKg-SNBODA1mKMCRrfMrls48x7owr9w8&sensor=true"'],
function(){
// return the gmaps namespace for brevity
return window.google.maps;
});
//--- Define moment ---
require(["moment"], function (moment) {
moment().format();
});
// --- Initialize the application ---//
require([
'zwoop', 'backbone'
], function(Zwoop, Backbone){
Zwoop.start();
});
The build file contains the following settings:
mainConfigFile:"js/main.js",
baseUrl : "js",
name: "main",
out: "dist/main.js",
removeCombined: true,
findNestedDependencies: false,
paths: {
jquery: "empty:"
}
I don't receive any errors, but unfortunately I receive an error in the browser:
Uncaught ReferenceError: $ is not defined
It appears that either jquery is not properly loaded from the CDN, or that something is not working correctly regarding the shim.
Can you spot what the error might be?
I have an optimized config.js (around 420kB) thats loaded by requirejs and everytime a new user registers and logs in this file is fetched and put in the cache , but the first time the user fetches this there is always a Uncaught Error: Load timeout for modules: config, and then the user has to refresh and then it loads.
I thought it's a timeout issue, so changed waitSeconds : 200. This happened in requireJs 2.1.6 so I upgraded to the latest 2.1.9 and still the same issue.
But if I don't use the optimizer and and use the unoptimized config file (3KB) which loads around 35-40 small js files (minified), it's going fine! But I want all the files to be in that optimized config.js because of less http requests (good for mobile).
Adding Code :
require.config({
paths : {
jquery : './vendor/libs/jquery-1.10.1.min',
underscore : './vendor/libs/underscore-min',
backbone : './vendor/libs/backbone-min',
marionette : './vendor/libs/backbone.marionette',
wreqr : './vendor/plugins/backbone.wreqr.min',
text : './vendor/plugins/text',
tpl : './vendor/plugins/tpl',
socketio : '../socket.io/socket.io.min',
spin : './vendor/plugins/spin.min',
shuffle : './vendor/plugins/jquery.shuffleLetters',
magicSuggest : './vendor/plugins/magicsuggest-1.3.0-min',
mCustomScroll : './vendor/plugins/jquery.mCustomScrollbar.concat.min',
imagesloaded : './vendor/plugins/imagesloaded',
qTip : './vendor/plugins/jquery.qtip.min',
visibility : './vendor/plugins/visibility',
tab : './vendor/plugins/tab',
dropdown : './vendor/plugins/dropdown',
interestsMap : './interestsMap',
moment : './vendor/plugins/moment.min',
favicon : './vendor/plugins/tinycon'
},
waitSeconds : 180,
shim : {
socketio : {
exports : 'io'
},
underscore : {
exports : '_'
},
backbone : {
deps : ['underscore','jquery'],
exports : 'Backbone'
},
marionette : {
deps : ['backbone'],
exports : 'Backbone.Marionette'
},
wreqr : {
deps : ['backbone'],
exports : 'Backbone.Wreqr'
},
shuffle : {
deps : ['jquery'],
exports : 'jQuery.fn.shuffleLetters'
},
magicSuggest : {
deps : ['jquery'],
exports : 'jQuery.fn.magicSuggest'
},
mCustomScroll : {
deps : ['jquery'],
exports : 'jQuery.fn.mCustomScrollbar'
},
visibility : {
exports : 'Visibility'
},
tab : {
deps : ['jquery'],
exports : 'jQuery.fn.tab'
},
dropdown : {
deps : ['jquery'],
exports : 'jQuery.fn.dropdown'
},
moment : {
exports : 'moment'
},
favicon : {
exports : 'Tinycon'
}
},
tpl : {
extension : '.tpl'
}
});
//Initialise
require([
'backbone',
'routers/index',
'app',
],function (Backbone ,Router ,app){
//var presence = io.connect(w.protocol+'//'+w.host+'/presence');
app.start();
Backbone.history.start();
});
**There are no errors in any of the modules since there are loading fine with the unoptimised config.js file .
Build config
({
appDir : '../',
baseUrl: './scripts',
dir : '../../dist',
mainConfigFile : '../scripts/config.js',
name: "config",
optimizeCss : 'standard'
})
To prevent your problem you can disable the require js timeout with the require js config property waitSeconds (set to 0). Default timeout are 7 seconds (see more http://requirejs.org/docs/api.html#config-waitSeconds).
But you should have a look at r.js (http://requirejs.org/docs/optimization.html#wholeproject) because with this you can merge all your js source files into one bigger app.js file with all dependencies. To use it you should remove the dir property and add the out property in your config file.
I am learning Marionett on the side, and am trying to stick to the core amd build and not shim marionett. here's my require config:
require.config({
paths : {
backbone : 'lib/backbone',
underscore : 'lib/underscore',
jquery : 'lib/jquery',
marionette : 'lib/backbone.marionette',
'backbone.wreqr' : 'lib/backbone.wreqr',
'backbone.babysitter' : 'lib/backbone.babysitter',
hbs : 'lib/hbs',
Handlebars : 'lib/Handlebars'
},
shim : {
jquery : {
exports : 'jQuery'
},
underscore : {
exports : '_'
},
backbone : {
deps : ['jquery', 'underscore'],
exports : 'Backbone'
}
},
hbs: {
disableI18n: true,
disableHelpers: true
}
});
I am getting Backbone is undefined in the application module of marionette when I create an application module as follows:
define(["marionette", "views/CatCompositeView"], function (Marionette, CatCompositeView) {
var app = new Marionette.Application();
app.addRegions({
mainRegion: '#content'
});
app.addInitializer(function(options){
var catCompositeView = new CatCompositeView({
collection: options.cats
});
app.mainRegion.show(catCompositeView);
});
return app;
});
Any ideas? I am able to get it all working when shimming marionette so I'm ok for now, but would like to load it all individually.
UPDATE: Here's how I ended up doing this in my require config:
require.config({
paths : {
backbone : 'lib/backbone',
underscore : 'lib/underscore',
jquery : 'lib/jquery',
marionette : 'lib/backbone.marionette',
'backbone.wreqr' : 'lib/backbone.wreqr',
'backbone.babysitter' : 'lib/backbone.babysitter',
hbs : 'lib/hbs',
Handlebars : 'lib/Handlebars'
},
shim : {
jquery : {
exports : 'jQuery'
},
underscore : {
exports : '_'
},
backbone : {
deps : ['jquery', 'underscore'],
exports : 'Backbone'
},
'backbone.wreqr': {
deps : ['backbone']
},
'backbone.babysitter': {
deps : ['backbone']
}
},
hbs: {
disableI18n: true,
disableHelpers: true
}
});
You need to shim Backbone.Marionnette too:
marionette : {
deps: ["backbone", "underscore"],
exports: "Backbone.Marionette"
}
See update above. I needed to add backbone as a dependency for wreqr and babysitter to load them individually.
I'm running on severals issues when I'm trying to run the node RequireJS on my project.
This is my folder structure :
-root
-/src
-App.coffee
-/static
-/vendor
-/plugin
-r.js
-coffee-script.js
-/lib
-jquery.js
-main.js
-build.js
This is my build.js file :
({
appDir : './',
baseUrl : './static/js/',
dir : '../public',
optimize : 'uglify',
exclude : ['coffee-script'],
stubModules : ['cs'],
paths: {
// Libraries
'modernizr' : 'vendor/modernizr',
'jquery' : ['//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min', 'vendor/jquery'],
'jqueryui' : 'vendor/jquery-ui',
'backbone' : 'vendor/backbone',
'underscore' : 'vendor/underscore',
// Plugins
'plugin' : 'plugin/plugin',
// RequireJS
'cs' : 'plugin/cs',
'coffee-script' : 'plugin/coffee-script'
},
shim: {
'jqueryui' : ['jquery'],
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
},
modules: [{
name: "main"
}]
})
And finally this is my main.js file :
require({
baseUrl : '../../src/',
paths: {
cs: '../../cs',
'coffee-script': '../../coffee-script'
}
}, ['cs!App']);
I'm getting always error related to incorrect path setting and I can't figured out where I'm wrong.
Thanks !
The solution below worked in my case. It's a common issue with non-amd modules imported with shim or wrapped manually (for instance this one, with custom paths).
Try avoiding relative paths and use absolute 1 paths instead.
A dependency called from an aliased module will use its current location to find the required module.
require.config(
{
locale: window.GIS.i18n.locale,
deps: ['cs!modules/main'],
paths: {
'i18n' : 'i18n',
'underscore' : 'libs/underscore',
'cs' : 'libs/cs', // there's no '../something/else/libs/cs'
'CoffeeScript' : 'libs/coffeescript', // ibidem.
'text' : 'libs/text',
// ... other amd module aliases go here...
},
shim:{
// ...
}
});
define(['cs!modules/main'], function(){});
1 Of course, these are not absolute paths per se, but they are relative to the root of your module tree.