Is possible to have requirejs config at one place and reuse it in modules?
such as
main.js:
requirejs.config({
baseUrl: "static/js",
paths: {
"jquery": "http://code.jquery.com/jquery-1.9.1.js",
"jquery-ui": "http://code.jquery.com/ui/1.10.2/jquery-ui.js"
},
shim: {
"jquery-ui": {
deps: ["jquery"]
}
}
});
and
public.js:
define(["main", "jquery", function(main, $) {
// do some public stuff
});
client.js:
define(["main", "jquery", function(main, $) {
// do some client stuff
});
And on my public part of web have
<script type="..." src="js/require.js" data-main="js/public.js"></script>
And on client part of web
<script type="..." src="js/require.js" data-main="js/client.js"></script>
And also I would like to have a module for each page. So for example to have a index module on public
<script ...>
require('public/index');
</script>
and
public/index.js:
define(["jquery", "slideshow"], function($, s) {
$( function() { s.init() } );
});
Is that possible with RequireJS?
Thank you for answers.
data-main is a useful shortcut in the very simple case but I don't find it terribly useful beyond that, the solution is to dump it entirely.
Load your main explicitly on each page, then use the callback to load your view-specific scripts.
So you have in public.html:
<script src="/Scripts/require.js"></script>
<script>
require('main', function(){
require('public');
})
</script>
and in client.html:
<script src="/Scripts/require.js"></script>
<script>
require('main', function(){
require('client');
})
</script>
I've written a blog post expounding on this idea here.
I edit my answer as you make the question clearer.
In any page you include require.js, you should also include main.js to define your RequireJS config.
You can't do things like
define(["main", "jquery", function(main, $) {
// do some public stuff
});
because ReuiqreJS load dependencies asynchronously. Although "main" is placed before "jquery", it's not guaranteed RequireJS will load them in that sequence.
So your public/index.html can be like:
<script type="..." src="js/require.js"></script>
<script type="..." src="js/main.js"></script>
<script ...>
require('public/index');
</script>
Related
I'm trying to get a basic require JS app working but I'm having some difficulties, could someone help please? I'm using Laravel as well.
Include script
<body>
#yield('content')
<script data-main="{{ asset('/js/main.js') }}" src="{{ asset('/js/require.js') }}"></script>
</body>
config.js
require.config({
baseUrl: "",
paths: {
"jquery": "jquery-2.1.3.min"
}
});
main.js
require(['config'], function() {
define(['jquery'], function($) {
$(document).ready(function()
{
alert("test");
});
});
});
Folder directory structure:
/public
-- /js
-- -- jquery-2.1.3.min.js
-- -- config.js
-- -- main.js
-- -- require.js
The error I get is:
Uncaught Error: Mismatched anonymous define() module: function () {
alert("test");
}
define() wrapper supposed to wrap a module, not nested inside any code block. In your case it is child of a require() wrapper.
And your main.js file supposed to be the config file. Because require.js will load it for the dependency list as first task in order to init and inject the other dependencies for your app.
There are 2 ways for you to do this.
Use seperate files (like your way)
main.js
require.config({
baseUrl: "",
paths: {
"jquery": "jquery-2.1.3.min",
"app" : "main_module"
},
deps: 'app'
});
main_module.js
define(['jquery'], function($) {
$(document).ready(function(){
alert("test");
});
});
Or put your config into your main.js. Then write your code inside
require.config({
baseUrl: "",
paths: {
"jquery": "jquery-2.1.3.min"
}
});
require(['jquery'], function($) {
$(document).ready(function(){
alert("test");
});
});
I'm new at handling imports with require.js, my question is very simple, let' say I have this config.js script for require:
require.config({
paths: {
jquery: 'libs/jquery/jquery',
underscore: 'libs/underscore/underscore',
backbone: 'libs/backbone/backbone'
}
});
and that is the first script I incorporate in my index.html:
<script data-main="config.js" src="require.js"></script>
From this point on can I use jQuery $, underscore _ and so on or should I also import such libraries in my index.html? It is puzzling how sometimes it works sometimes not, so I guess I am not doing it right.
EDIT: I will explain my question a little better here:
1)
<script data-main="config.js" src="require.js"></script>
<script src="libs/jquery/jquery.min.js"></script>
<script>
$( "div.bar" )...
//some other jquery
</script>
<script src="..">//some script which uses require</script>
is jQuery loading twice in this page?
2) I have some libraries which needs jQuery to work, can I just add them to the paths in the require config?
You need to require the modules and provide a callback function to use them:
require(['jquery', 'underscore', 'backbone'],
function ($, _, backbone) {
//the modules are all
//loaded and can be used here now.
});
I would like to use requireJS. However, I have a lib that needs to be loaded before the DOM. However, this is not what happens with requireJS
<html>
<head>
<script data-main="/app" src="/require.js"></script>
</head>
<body>
<bar-foo/>
</body>
</html>
With app.js
require.config({
paths: {
'customElement': '/customElement',
'barfoo': '/barfoo'
},
shim: {
barfoo: {
deps: [ 'customElement' ]
}
}
});
define(['barfoo'], function() {
....
}
For example, if I simply load this script directly in the head (without requireJS) it works fine. Is there a require-config-option so I can load a specific file immediately (synchronously?) ?
Requirejs is known for it's asynchronous power. However when you need some sort of an order in which you want files to be loaded due to dependencies, in require.config there is a shim config:
shim: Configure the dependencies, exports, and custom initialization for older, traditional "browser globals" scripts that do not use define() to declare the dependencies and set a module value.
So let's say you have a backbone app that depends on Underscore and jQuery, and you want them to load in that order then your would:
require.config({
paths: {
'Backbone': '/Backbone',
'Underscore': '/Underscore',
'jQuery': '/jQuery'
},
shim: {
'Backbone': [ 'Underscore', 'jQuery' ]
}
});
require(['Backbone'], function(Backbone){
//.....
});
So, RequireJS allows us to use the shim config to define the sequence of files which need to be loaded in correct order.
Because I need important settings from the serverside I am required to put the main file in the HTML file. But my problem now is that the alias files still load, but are not available as variable. (Also not in the app.js file or in other defined files.) So when I do this: (See bottom of the HTML page)
require([
'jquery'
'app'
], function($, App) {
alert($);
App.initialize();
});
The alert will show a undefined variable, but when I look at my loaded files. The jQuery file is loaded. (The same problem with the underscore and backbone variable, but not the app variable, it is a problem with only the aliases.)
Do you know how to solve this problem?
<html>
<head>
<title>Domain.net</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/lib/modernizr.js"></script>
<script src="js/lib/require.js"></script>
<script type="text/javascript">
// Require.js allows us to configure shortcut alias
require.config({
baseUrl: "js",
paths: {
jquery: 'lib/jquery',
underscore: 'lib/underscore',
backbone: 'lib/backbone',
templates: '../templates'
}
});
define('config', function() {
return {
/** My serverside config */
}
});
//Load the App
require([
'jquery',
'app'
], function($, App) {
alert($);
App.initialize();
});
</script>
I'm not sure what version of jQuery you are using, but if it is not 1.7 or higher, then it will not support amd by default, which would explain why you get undefined. The best solution in that case would be to update it.
Alternatively, try adding a shim with exports: jQuery to your config:
require.config({
baseUrl: "js",
paths: {
jquery: 'lib/jquery',
underscore: 'lib/underscore',
backbone: 'lib/backbone',
templates: '../templates'
},
shim: {
jquery: {
exports: 'jQuery'
}
}
});
Also note that the way you are setting up your serverside config is prone to a race condition, see this answer.
Can I use Require.js in development without using the data-main attribute to load in my initial script? ie. <script data-main="scripts/main" src="scripts/require.js"></script> I'm finding it difficult for me to work with this attribute in my development environment.
Yep, take a look at the documentation: http://requirejs.org/docs/api.html#config
You need to call require.config() and set baseUrl. Based on your example:
<script src="scripts/require.js"></script>
<script>
require.config({
baseUrl: "scripts"
});
require( [ /*...*/ ], function( /*...*/ ) {
/*...*/
});
</script>