I am using require.js, all are correct as well. I see the js loads in the document. In case of consoling, I am getting all of the parameters apart from Backbone. Why is the Backbone not logged in the console?
Here is my code :
requirejs.config({
baseUrl : "scripts",
paths : {
"jquery" :"lib/jquery-min",
"loDash" :"lib/lodash-min",
"backBone" :"lib/backbone-min"
//this is exist load in document header, not console
}
});
require(["jquery","loDash","backBone"], function($,_,bB){
console.log($,_,bB);//jquery, underscore console correctly.
// 3rd one "bB" - stand for backbone, it console as undefined - why?
});
I am getting loaded all the js fine, including Backbone, on the document.
I added the shim, and it works fine.
requirejs.config({
baseUrl : "scripts",
paths : {
"jquery" :"lib/jquery-min",
"loDash" :"lib/lodash-min",
"backBone" :"lib/backbone-min"
},
shim : {
"backBone":{
deps :["loDash"],
exports :"Backbone"
}
}
});
require(["jquery","loDash","backBone"], function ($,_,bB) {
console.log($,_,bB);
});
Related
I am doing my first try using requireJS and it works great !
I now would like to use the optimizer and i meet some issues when running my code in the browser.
I have these JS files:
/public/javascripts/build.js
/public/javascripts/main.js
/public/javascripts/lib/jquery.min.js
/public/javascripts/lib/require.min.js
/public/javascripts/a.js
/public/javascripts/b.js
/public/javascripts/c.js
a.js, b.js and c.js are modules i define for my application using requireJS.
main.js:
require.config({
paths: {
'jQuery': 'lib/jquery.min.js'
},
shim: {
'jQuery': {
exports: '$'
}
}
});
require(['a.js'], function(A){
var Entity = new A();
});
build.js
({
baseUrl: ".",
paths: {
requireLib: "lib/require.min",
jquery: "lib/jquery.min"
},
name: "main",
out: "main-built.js",
include: ["requireLib"]
})
Also i am wondering why do we have to specify the paths of the libraries into the build.js and not the other javascript files.
When i do not use the optimizer and only load the file
<script src="/javascripts/lib/require.min.js" data-main="/javascripts/main"></script>
it works great, but when i run r.js -o ./public/javascripts/build.js and only load
<script src="/javascripts/main-built.js"></script> i get the error Uncaught TypeError: undefined is not a function in the minified code.
How to explain that ?
Here are the logs i get when running r.js
Tracing dependencies for: main
Uglifying file: /public/javascripts/main-built.js
/public/javascripts/main-built.js
----------------
/public/javascripts/lib/require.min.js
/public/javascripts/a.js
/public/javascripts/b.js
/public/javascripts/lib/jquery.min.js
/public/javascripts/c.js
/public/javascripts/main.js
This is definitely wrong:
require(['a.js'], function(A){
var Entity = new A();
});
You should not use extensions in the list of dependencies you give to require or define. Modules should be named without extension. So here 'a', not 'a.js'. Using 'a.js' will cause RequireJS to fail loading what you really want once the optimizer has run. Let's say you have a file named a.js which has:
define(function () {
return function () {};
});
The optimizer will include it into your main-built.js file like this:
define("a", function () {
return function () {};
});
Note how the first parameter to define is now "a". This has been added by r.js. This is the name of the module. When you load main-built.js, a module named "a" is defined. When you use require with "a.js", you are telling RequireJS you want something in a file named a.js so RequireJS will go looking for that and ignore what is in main-built.js.
Also, jQuery 1.8 or over does not need a shim.
I just have added
shim: {
'jQuery': {
exports: '$'
}
}
into the build.js file, and it works perfectly !
Thanks !
I'm trying to use jQuery file upload, but I'm getting stuck with the RequireJS configuration. We install our dependencies in a /ext/ folder, e.g:
/src
/ext
/jquery-file-upload
In my main.js I use the following config:
require.config({
paths: {
"ext/jquery-file-upload": "../ext/jquery-file-upload/js/jquery.fileupload"
}
});
require([
"ext/jquery-file-upload"
]);
But then RequireJS tries to load jquery.ui.widget.js from the root instead of as a relative file. It is located in the jquery-file-upload directory..
Does anyone know what I'm doing wrong, or does anyone know of a working RequireJS config for jQuery file upload?
Thanks,
Martijn
If you look at the jquery.fileupload.js file, at the top it declares its own dependencies
if (typeof define === 'function' && define.amd) {
// Register as an anonymous AMD module:
define([
'jquery',
'jquery.ui.widget'
], factory);
You need to edit your require.config path for the jquery.ui.widget item.
require.config({
paths: {
'jquery.ui.widget': 'your_path_here/jquery.ui.widget'
}
});
If I don't mistake, your problem is that your plugin - jquery-file-upload - tries to load its dependencies by itself.
The problem is that filepaths in JS are relative to the page loading the script file, not to the file itself (Relative Paths in Javascript in an external file). This explains why your file seems to be loaded relatively to the root and not the given path.
In this case, you probably will have to manipulate a bit of the plugin code and take a look at the explanations given here concerning requireJS and dependencies loading:
How do I use requireJS and jQuery together? .
Try mapping jquery.widget.ui to the correct path...
require.config({
paths: {
"ext/jquery-file-upload": "../ext/jquery-file-upload/js/jquery.fileupload"
"jquery.ui.widget": "../ext/jquery-file-upload/js/vendor/jquery.ui.widget"
}
});
require([
"ext/jquery-file-upload"
]);
For anyone else having this problem...this is the config that worked for us.Hope it helps someone
The paths declaration
paths: {
'jquery.ui.widget': '../../Scripts/FileUpload/jqueryui/jquery.ui.widget',
'jquery_iframe_transport': '../../Scripts/FileUpload/jquery.iframe-transport',
'jquery.fileupload': '../../Scripts/FileUpload/jquery.fileupload'
}
The Define statement
define(['jquery.ui.widget','jquery_iframe_transport','jquery.fileupload'])
The above is dependent on jquery being loaded. We are using Durandal hence dont need a shim but you will need to ensure jquery is loaded before anything else
The initialisation in code
function uploadFile() {
var url = '/Backload/UploadHandler';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
}
});
}
This is the basic upload example..
I'm having an issue attempting to create a RequireJS shim for some javascript code that was written by another team in my organization. The script is loaded via a noraml HTML script as such:
<script src="MyCustomModule.js" type="text/javascript"></script>
My main.js contains the following:
requirejs.config({
paths: { 'text': 'durandal/amd/text' },
shim: {
'MyCustomModule': { exports: 'My.Custom.Module' }
}
});
And I have tried accessing the custom module in a variety of ways, but this is my current code:
define(['MyCustomModule'], function (require, MyCustomModule) {
...
}
But each time the page/app loads I get an error from RequireJS indicating that it failed to load app/MyCustomModule.js (and I can see the 404 error in the console where it attempted to request the file from the server). What am I doing wrong?
You also need to include MyCustomModule in paths:
requirejs.config({
paths: {
'text': 'durandal/amd/text'
'MyCustomModule': 'path/to/MyCustomModule'
},
shim: {
'MyCustomModule': {
exports: 'My.Custom.Module'
}
}
});
If you don't do that, define(['MyCustomModule'] (...) will look for the dependency in the baseUrl location, in your case: app/MyCustomModule.
In other words: shim can't "pick up" global variables that are not loaded by RequireJS.
I have the following code.
<script src="js/libs/require.js"></script>
<script>
requirejs.config({
baseUrl:'js/modules/',
paths:{
'bbn':'../libs/backbone',
'underscore':'../libs/underscore'
},
shim:{
'bbn':{
exports:'B',
deps:['underscore']
}
}
})
requirejs(['bbn'], function(B){
console.log(B)
});
</script>
The function parameter B is not pointing to Backbone. Instead its getting logged as undefined.
I followed the following post and arrived to this point:
Loading Highcharts via shim using RequireJS and maintaining jQuery dependency
I see both underscore and backbone JavaScript files getting downloaded in firebug.
Underscore is not AMD compat either, so make sure you shim that too:
requirejs.config({
baseUrl:'js/modules/',
paths:{
'bbn':'../libs/backbone',
'underscore':'../libs/underscore'
},
shim:{
'bbn':{
exports:'Backbone',
deps:['underscore']
},
'underscore': {
exports: '_'
}
}
})
requirejs(['bbn'], function(Backbone){
console.log(Backbone)
});
You will see Underscore being downloaded but because it not defined as a proper module RequireJS just treats it as a normal JS file and doesn't get a return value
The latest version of Underscore (~1.6.0 as of writing this) is AMD-compatible. Do not use it as a shim or you may run into issues.
I'm pretty new to require.js and having problems loading i18next.js.
main.js
require(["lib/jquery", "lib/i18next", "config.i18next", "constants"],
function(util) {
console.log("loaded javascript files");
});
and config.i18next.js
var option = {resGetPath: '../translations/__lng__.json' };
i18n.init(option, function(t) {
console.log("Language initialization successfull");
});
I always get the error
Uncaught ReferenceError: i18n is not defined config.i18next.js:2
I know who to use i18next, and everything works fine when loading the javascript files traditionally.
EDIT:
Meanwhile I got it working with shim like this:
requirejs.config({
shim: {
'lib/i18next' : ['lib/jquery'],
}
});
require(["lib/i18next"], function(i18n) {
var options = {
resGetPath: 'translations/__lng__.json',
preload: ['de', 'en']
};
i18n.init(options, function(t) {
});
});
and I can translate in other files with $.t("key"); , but when now I can't change the language programatically with i18n.setLng() because the variable can't be found ReferenceError: Can't find variable: i18n.
--- i18next comes now with amd build ---
this should solve all issues using i18next with amd. you can grab it at http://i18next.com