Here is my folder structure:
project
|---src
| |---lib/require.js
| |---object/extend.js
| |---main.js
|
|---index.html
in the main.js, I import require.js and main.js, success:
<script type="text/javascript" src="src/lib/require.js" data-main="src/main"></script>
then in the main.js , I try to import the extend.js:
requirejs.config({
baseUrl: 'src'
});
require(["object/extend.js"], function (extend){
});
but it failed, it tell 404, and I saw the request is :
http://127.0.0.1:8000/object/extend.js
it seems the baseUrl doesn't work
so what's wrong with my code? How can I let the baseUrl work?
You should not have .js in your require. It should be:
require(["object/extend"], function (extend){
});
When RequireJS sees a dot in the module name it appears to assume that this is a full URL and does not process the baseUrl, etc. Note, however, that you can still use a dot in the module name if you've defined it as a path mapping:
require.config({
paths: {
'a.b': 'libraries/something/a.b'
}
});
and then later require it:
require(['a.b'], function (ab){
});
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 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 am running into a strange error. EDIT Happens in Firefox, but not Chrome
In my HTML page I have this:
<script type="text/javascript">
require(['blah']);
</script>
In a javascript file named someFileNameNotNamedBlah.js I have this:
define(
'blah',
['jquery', 'amplify', 'config' ],
function ($, amplify, config) {
...
});
The browser seems to be looking for blah.js... Why? How do I fix this?
Firebug looking for a filename that is not there
The question you need to ask yourself is this: Given that RequireJS loads modules asynchronously via a XHR request, how could it know to look for the module blah in a file called someFileNameNotNamedBlah.js unless it's told where it lives?
You should define an alias for the module in your paths configuration:
require.config({
paths: {
blah: 'someFileNameNotNamedBlah'
}
});
You can then remove the module name from your module:
define(['jquery', 'amplify', 'config' ], function ($, amplify, config) {
//...
});
And find it by the alias:
require(['blah']);
I set the data-main for Requirejs and according to the documentation that should set the baseUrl for all my script files. But this is not the case.
My folder structure is this:
Home/Index.html
Content/scripts/main.js
Content/scripts/libs/require/require.js
Content/scripts/libs/jquery/require_jquery.js
Content/scripts/libs/jquery/jquery-1.7.1.mins.js
Here is the script tag in my Index.html:
<script data-main="/PAWS/Content/scripts/main.js" src="/PAWS/Content/scripts/libs/require/require.js" type="text/javascript"></script>
I would assume it would set my baseUrl to /PAWS/Content/scripts/ but its not working for me. In my main.js I do this:
require(
{ paths:
{ jquery: 'libs/jquery',
knockout: 'libs/knockout'
}
},
['jquery/require_jquery'],
function ($) { .... }
);
In my require_jquery.js file I do this:
define(["libs/jquery/jquery-1.7.1.min.js"], function () {
return jQuery;
});
But I get a 404 error saying that:
GET http://localhost/PAWS/Home/libs/jquery/jquery-1.7.1.min.js 404 NOT FOUND
You see.. my baseUrl should be /PAWS/Content/scripts... But it totally ignores my data-main attribute setting and just resolves /PAWS/Home/ to be the baseUrl. What am I doing wrong?
From the RequireJS API docs:
However, if the dependency name has one of the following properties, it is treated as a regular file
path, like something that was passed to a <script src=""> tag:
Ends in ".js".
Starts with a "/".
Contains an URL protocol, like "http:" or "https:".
From this, it appears that your explicit ".js" on the end of libs/jquery/jquery-1.7.1.min.js is confounding your path re: baseUrl. Try libs/jquery/jquery-1.7.1.min instead.