I have the following main.js
requirejs.config({
baseUrl: 'js',
paths: {
"jquery": "http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"
},
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'marionette': {
deps: ['jquery', 'underscore', 'backbone'],
exports: 'Marionette'
},
'underscore': {
exports: '_'
}
}
});
The code to require query:
define(['jquery', 'backbone', 'marionette'], function($, Backbone, Marionette) {
Backbone, marionette and underscore all load correctly, but requireJS is ignoring the 'paths' config and trying to load jquery from js/jquery.js, not the CDN.
Using requires 2.1.9
You should exclude the ".js" extension from the CDN URL, just as you would for file paths in your baseUrl directory:
paths: {
"jquery": "http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min"
},
Related
I encountered the following error:
Uncaught TypeError: Cannot call method 'compile' of undefined.
RequireJS configuration:
requirejs.config({
baseUrl: "resources",
paths: {
'app':'lib',
'jquery': 'lib/jquery-1.9.1',
'bootstrap': 'lib/bootstrap',
'html5shiv': 'lib/html5shiv',
'spin': 'lib/spin',
'respond': 'lib/respond',
'underscore': 'lib/underscore',
'backbone': 'lib/backbone',
'handlebars': 'lib/handlebars-v3.0.3',
'template': 'app/templates'
},
shim: {
html5shiv: {
deps: ['jquery']
},
respond: {
deps: ['jquery']
},
bootstrap: {
deps: ['jquery']
},
jquery: {
exports: '$'
},
underscore: {
exports: '_'
},
backbone: {
deps: ['jquery', 'underscore'],
exports: 'Backbone'
},
handlebars: {
exports: "Handlebars"
}
}
});
require([
'jquery',
'underscore',
'backbone',
'handlebars',
'app/Router'
], function($,
_,
Backbone,
Handlebars,
Router) {
var router = new Router();
Backbone.history.start();
});
View:
define([
'backbone',
'handlebars',
'text!templates/mytemplate.html'
], function(Backbone, Handlebars, Template){
MyView = Backbone.View.extend({
tagName: 'li',
template: Handlebars.compile(Template),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
return MyView;
});
shim is for libraries that doesn't support AMD. The version of handlebars you're using probably supports AMD and doesn't define a global variable named Handlebars. Hence you get the error. Try removing handlebars config from shim.
I have been using requirejs and am having trouble getting the optimization tool to work. All I want to do is optimize my javascript files into one script file with all my dependencies included.
All my file are in the one js/ folder and I have a sub folder vendors/
I have a config file which looks like this(config.js):
requirejs.config({
baseUrl: ".",
out: "main-built.js",
deps: ["main"],
paths: {
jquery: "vendor/jquery", // v.1.10.2
bootstrap: "vendor/bootstrap",
ajaxform: "vendor/ajaxform",
skrollr: "vendor/skrollr",
jqueryform:"vendor/jqueryform"
},
shim: {
bootstrap: {
deps: ["jquery"],
exports: "bootstrap",
},
ajaxform: {
deps: ["jquery"],
exports: "ajaxform",
},
jqueryform: {
deps: ["jquery"],
exports: "jqueryform",
}
}
});
And I have an main javascript file (main.js) which looks like this:
if (typeof jQuery === 'function') {
define('jquery', function () { return jQuery; });
}
define(["jquery","bootstrap", "ajaxform","skrollr"],
function($, bootstrap, ajaxform, skrollr) {
//have other code here
});
I also created a build file:
({
baseUrl: ".",
paths: {
jquery: "vendor/jquery", // v.1.10.2
bootstrap: "vendor/bootstrap",
ajaxform: "vendor/ajaxform",
skrollr: "vendor/skrollr",
jqueryform:"vendor/jqueryform"
},
shim: {
bootstrap: {
deps: ["jquery"],
exports: "bootstrap",
},
ajaxform: {
deps: ["jquery"],
exports: "ajaxform",
},
jqueryform: {
deps: ["jquery"],
exports: "jqueryform",
}
},
name: "main",
out: "main-built.js"
})
All the build file does is compress the main.js file itself and doesn't include all needed files.
I've been trying to get this working on and off for weeks and can't seem to get it right so any help would be REALLY appreciated.
Thanks
Try adding a modules entry to your build file with your main module, as in:
modules: [
{ name: 'main' }
]
You can see all the options for the build file here: https://github.com/requirejs/r.js/blob/master/build/example.build.js
I recently worked on a web app, and i wanted to separate it into modules.
I searched and found out that RequireJs is the best for this. I read the doc, and some tutorials about it and came up with this
requirejs.config({
baseUrl: "js/lib",
shim: {
'jquery-1.12.1.min': ['jquery-1.12.1.min'],
'materialize.min': ['materialize.min'],
'knockout-3.4.0': ['knockout-3.4.0'],
'pouchdb-5.3.0.min': ['pouchdb-5.3.0.min']
},
waitSeconds: 0,
paths: {
'jquery-1.12.1.min': 'jquery-1.12.1.min',
'materialize.min': 'materialize.min',
'knockout-3.4.0': 'knockout-3.4.0',
'pouchdb-5.3.0.min': 'pouchdb-5.3.0.min',
}
});
require(["jquery-1.12.1.min", "knockout-3.4.0", "materialize.min", "pouchdb-5.3.0.min"], function($, ko) { //My main functions and other stuff ... }
My index has the following:
<script data-main="js/main" src="js/lib/require.js"></script>
<script type="text/javascript" src="js/converter.js"></script>
But it seems that my Jquery, KO, materialize.css and pouchdb aren't loading as i see on my chrome dev tools in Network:
I also read about the shim config how to set up the dependences and i want them in that order. I don't really know what am i missing, any help would really be appreciated.
Folder structure is:
js:
lib:
->jquery-1.12.1.min.js
->knockout-3.4.0.js
->pouchdb-5.3.0.min.js
->materialize.min.js
->require.js
main.js
converter.js
Ok it seems require and materialze.css have a problem with hammer.js, what i recommend is you go and download Hammer.min.js and include it in your lib folder.
Then in your main.js add the following:
requirejs.config({
baseUrl: 'js/lib',
waitSeconds: 0,
paths: {
app: '../app',
jquery: 'jquery-1.12.1.min',
materialize: 'materialize.min',
knockout: 'knockout-3.4.0',
pouchdb: 'pouchdb-5.3.0.min',
hammer: 'hammer.min'
},
shim: {
hammer: {
deps: ['jquery']
},
pouchdb: {
deps: ['jquery']
},
knockout: {
deps: ['jquery'],
exports: 'ko'
},
materialize: {
deps: ['jquery', 'hammer'],
},
jquery: {
exports: '$'
}
}
});
You include you hammer and also the dependency for jquery on it. And i see that you didn't put the PouchDb object in the function:
define(["jquery", "knockout", "pouchdb", "materialize" ], function($, ko, PouchDB) {...
Hope this helps
Using path, requirejs replace module id prefixes (name in config) with the corresponding value.
Using shim you can export a global variable and configure the dependencies ( materialize depends jquery so you have to import jQuery before importing materialize.js )
requirejs.config({
baseUrl: "js/lib",
waitSeconds: 0,
paths: {
'jquery': 'jquery-1.12.1.min',
'materialize': 'materialize.min',
'knockout': 'knockout-3.4.0',
'pouchdb': 'pouchdb-5.3.0.min',
'hammer': 'hammer.min',
},
shim: {
pouchdb: {
deps: ['jquery']
},
knockout: {
exports: 'ko'
},
materialize: {
deps: ['jquery', 'hammer']
},
jquery: {
exports: '$'
}
}
});
require(["jquery", "knockout", "materialize", "pouchdb"], function ($, ko) {
console.log($);
console.log(ko);
});
I have the following directory structure to my tpl:
-src
-assets
-js
-lib
[files]
-src
-templates
-common
builder_regions.tpl
My require.config is:
require.config({
baseUrl:'src/assets/js',
paths: {
backbone: 'lib/backbone',
jquery: 'lib/jquery.min',
'jquery-ui': 'lib/jquery-ui-1.10.4.custom.min',
underscore: 'lib/underscore.min',
modernizr: 'lib/modernizr.min',
'magnific-popup': 'lib/magnific-popup.min',
text: 'src/assets/jslib/text',
marionette: 'lib/backbone.marionette.min',
tpl: 'lib/underscore-tpl'
},
shim: {
jquery: {
exports: '$'
},
underscore: {
exports: '_'
},
backbone: {
deps: [ 'jquery', 'underscore' ],
exports: 'Backbone'
},
marionette: {
deps: [ 'jquery', 'underscore', 'backbone' ],
exports: 'Marionette'
},
'jquery-ui': {
deps: [ 'jquery' ],
exports: '$ui'
},
'magnific-popup': {
deps: [ 'jquery' ],
exports: 'magnificPopup'
},
tpl: [ 'text' ]
}
});
My require module is set-up as:
define([ 'tpl!src/templates/common/builder_regions.tpl', function( Marionette, layoutTpl ) {
console.log( 'did not throw' );
});
When I access the module I get the following error:
GET http://localhost:3000/src/assets/js/src/tpl.js 404 (Not Found)
Why is file tpl.js being referenced when I provided the path in require.config? Thanks!
If your underscore-tpl.js is this one then you do not need a shim configuration for it because it calls define by itself. If you use a shim configuration for something that does not need a shim, RequireJS can behave strangely.
Another thing not related to the problem you are reporting here but could give you trouble down the line: jQuery has not needed a shim since at least version 1.9. So if you use a version that is >= 1.9, you should remove the shim you have for jquery.
Try This:
define(['marionette', 'tpl!src/templates/common/builder_regions.tpl'], function( Marionette, layoutTpl ) {
console.log( 'did not throw' );
});
I'm working with the ngStart Angular seed project and I'm trying to optimize RequireJS for deployment. When I run the grunt job to build the artifact, I end up with an output file that does not include all of the libraries in my main.js file. I've spent most of today trying different things to get this to work. If I explicity list every module in my gruntfile (something I really don't want to do) they all get in there, but seemingly not in the right order as it doesn't work in the browser. I thought that the optimizer was supposed to read the require.config call in my main.js and load everything in the correct order. Below is what I thought should work, but isn't loading all of my modules.
grunt task:
requirejs: {
compile: {
options: {
baseUrl: "<%= pkg.folders.jsSource %>",
name: "main",
include: [
'almond'
],
mainConfigFile: "<%= pkg.folders.jsSource %>/main.js",
out: "<%= pkg.folders.build + pkg.name + '-' + pkg.version %>/modules/main.js",
optimize: "none",
paths: {
'almond': '../../../bower_components/almond/almond',
'config/configuration': 'config/<%=configuration%>'
},
generateSourceMaps: true,
preserveLicenseComments: false,
useSourceUrl: true,
uglify2: {
// TODO - angular.js is already minified, mangling destroys it, so mangling is currently globally disabled
mangle: false
}
}
}
}
main.js:
/*global require */
(function (require) {
"use strict";
require.config({
paths: {
'jquery': '../../../bower_components/jquery/jquery',
'jquery-ui': '../../../bower_components/jquery-ui/ui/jquery-ui',
'jquery.ui.widget': '../../../bower_components/jquery-ui/ui/jquery.ui.widget',
'bootstrap': '../../../bower_components/bootstrap/dist/js/bootstrap',
'angular': '../../../bower_components/angular/angular',
'ngResource': '../../../bower_components/angular-resource/angular-resource',
'angular-route': '../../../bower_components/angular-route/angular-route',
'angular-sanitize': '../../../bower_components/angular-sanitize/angular-sanitize',
'ngUi': '../../../bower_components/angular-ui/build/angular-ui',
'ui.bootstrap': '../external-libs/angular-ui-bootstrap/ui-bootstrap-tpls-0.6.0-SNAPSHOT',
'ngCalendar': '../../../bower_components/angular-ui-calendar/src/calendar',
'uikeypress': '../../../bower_components/angular-ui-utils/modules/keypress/keypress',
'dtPicker': '../../../bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min',
'fileUpload': '../../../bower_components/blueimp-file-upload/js/jquery.fileupload',
'fullcalendar': '../../../bower_components/fullcalendar/fullcalendar',
'iframeTransport': '../external-libs/iframetransport/jquery.iframe-transport',
'moment': '../../../bower_components/momentjs/moment'
},
shim: {
'jquery': { deps: [], exports: 'jquery' },
'jquery-ui': { deps: ['jquery'], exports: 'jquery-ui' },
'jquery.ui.widget': { deps: ['jquery'], exports: 'jquery-ui-widget' },
'bootstrap': { deps: ['jquery'], exports: 'bootstrap' },
'angular': { deps: ['jquery'], exports: 'angular' },
'ngResource': { deps: ['angular'], exports: 'ngResource' },
'angular-route': { deps: ['angular'], exports: 'ngRoute' },
'angular-sanitize': { deps: ['angular'], exports: 'ngSanitize' },
'ngUi': { deps: ['angular'], exports: 'ngUi' },
'ui.bootstrap': { deps: ['angular', 'bootstrap', 'ngUi'], exports: 'ui-bootstrap' },
'ngCalendar': { deps: ['jquery', 'jquery-ui', 'fullcalendar', 'angular'], exports: 'ngCalendar' },
'uikeypress': { deps: ['angular', 'ngUi'], exports: 'uikeypress' },
'dtPicker': { deps: ['jquery', 'bootstrap', 'moment'], exports: 'dtPicker' },
'fileUpload': { deps: ['jquery', 'jquery-ui', 'bootstrap', 'iframeTransport'], exports: 'fileUpload' },
'fullcalendar': { deps: ['jquery', 'jquery-ui'], exports: 'fullcalendar' },
'iframeTransport': { deps: ['jquery', 'jquery-ui'], exports: 'iframeTransport' },
'moment': { deps: ['jquery'], exports: 'moment' }
},
priority: ['angular']
});
require(['config/config',
'angular',
'angular-route'],
function (config, angular, routes) {
require(config.standardRequireModules, function (angular) {
angular.bootstrap(document, ["app"]);
});
});
}(require));
When I run the task, I get this:
Running "requirejs:compile" (requirejs) task
Tracing dependencies for: main
/Users/user/dev/project/trunk-angular/target/project-0.1.0/modules/main.js
----------------
/Users/user/dev/project/trunk-angular/bower_components/almond/almond.js
/Users/user/dev/project/trunk-angular/bower_components/jquery/jquery.js
/Users/user/dev/project/trunk-angular/bower_components/angular/angular.js
/Users/user/dev/project/trunk-angular/src/main/modules/config/configuration.js
/Users/user/dev/project/trunk-angular/bower_components/bootstrap/dist/js/bootstrap.js
/Users/user/dev/project/trunk-angular/bower_components/angular-ui/build/angular-ui.js
/Users/user/dev/project/trunk-angular/src/main/external-libs/angular-ui-bootstrap/ui-bootstrap-tpls-0.6.0-SNAPSHOT.js
/Users/user/dev/project/trunk-angular/src/main/modules/config/config.js
/Users/user/dev/project/trunk-angular/bower_components/angular-route/angular-route.js
/Users/user/dev/project/trunk-angular/src/main/modules/main.js
Root of the project is /Users/user/dev/project/trunk-angular.
All of the path variables should be fine (they are in the other tasks and the outputted paths are right). I just don't know what's going on and would greatly appreciate some help.
First, I see, you are using nested require calls, but your build configuration doesn't include
findNestedDependencies: true.
Second, requirejs optimizer includes only those modules from path, that are explicitly required, or defined as a dependency for other modules, that are required later.