Using requirejs my main.js looks like this
requirejs.config({
baseUrl: '/javascript/',
paths: {
jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
async: 'requirePlugins/async',
hbs: 'hbs'
},
waitSeconds: 7
});
define(['common'], function () {
loadFonts();
});
The main.js is included in the page with a script call
<script data-main="/javascript/main.js" src="/javascript/require-2.0.1.js"></script>
Common is the basic function for the website, jquery doc ready function etc. wrapped in a define call:
define(['jquery'], function() {
//jQuery dependant common code
});
This works fine, jQuery is loaded from the google CDN and the code is executed. But when i add a require call after the load of main.js
<script data-main="/javascript/main.js" src="/javascript/require-2.0.1.js"></script>
require(['jquery'], function ($) {
//code
});
jquery is requested from /javascript/jquery.js instead of the defined path to the google cdn. I'm still a rookie at requirejs but it would seem to me that the path should be defined before any of the other requests are fired, can somebody please help me understand what I'm doing wrong?
I think this could be due to using the data-main attribute on the RequireJS script tag; for that to be parsed, RequireJS itself has to load and parse. In my testing (specifically for IE9), the browser would download and execute any script tags directly following the RequireJS script tag before parsing the RequireJS config file (the one specified by the data-main attribute).
To get around this, I simply quit using the data-main attribute and instead placed the config file as a normal script tag directly after the RequireJS script tag, and everything seems to be happy now.
Specifically, this is what it looks like (using your sample):
<script src="/javascript/require-2.0.1.js"></script>
<script src="/javascript/main.js"></script>
Maybe you put the config statement before require js being loaded.
You should load require.js first, put your config code after, then call require(['jquery'], ...);
The reason it searches /javascript/ is because your require.js file is located there and it is the default base url.
Your config may never be used by require.js.
See this tutorial about require config.
You have to rename define to require
require(['common'], function () {
loadFonts();
});
I'd recommend using map instead of paths to configure specific module locations.
paths is intended more for shortcuts/prefixs to simplify/configure includes, rather than full module paths.
Bear in mind: you'll need to place mappings you want to apply globally under an asterisk (*) key in the map object.
The reason is you put require(['jquery']... immediately after loading require.js module. As the result, it tries to load ['jquery'] before reading your config settings.
And why it tries to find jquery in /javascript/jquery.js? that is because of your data-main attribute.
RequireJS loads all code relative to a baseUrl. The baseUrl is
normally set to the same directory as the script used in a data-main
attribute for the top level script to load for a page.
This link clarifies require.js module loading procedure:
http://requirejs.org/docs/api.html#jsfiles
i think you can embed the full url in the require block. like:
require(['http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'], function ($) {
//code
});
btw, your jquery link is invalid.
Related
I need to load a script which is located at a server, and it requires authentication. I know both user and pass, but I don't know how to pass them to RequireJS.
The code looks like this:
require.config({
baseUrl: //directory where the script file is located
});
require(["js/qlik"], function(qlik) {
// code
});
Thanks for reading!
I have an angular application with below index.html file
Consider in my index.html page I have the following code for SRI (SubResource Integrity)
<html>
<head>
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' scripts/alert.js 'unsafe-inline' 'unsafe-eval' 'sha256-qznLcsROx4GACP2dm0UCKCzCG+HiZ1guq6ZZDob/Tng='">
<script src="scripts/alert.js"
integrity="sha256-qznLcsROx4GACP2dm0UCKCzCG+HiZ1guq6ZZDob/Tng="
crossorigin="anonymous"></script>
</head>
</html>
In case, if I am using require JS, then I have to move the script inclusion of 'alert.js' to 'main.js' file as below
require.config({
// alias libraries paths
paths: {
'jquery': '/scripts/alert'
},
// kick start application
deps: ['../app/require.bootstrap']
})
Can someone help me how to include the integrity attribute to the main.js file while referring the alert.js script in the paths.
If I understand your question correctly, you want to use Sub Resource Integrity for scripts referenced via require js. Note, that in order to do this you need RequireJS version 2.1.19 or later (see http://requirejs.org/docs/download.html).
For a working example (referencing jQuery), see this plunker: http://plnkr.co/edit/kzqLjUThJRtoEruCCtMt?p=preview. Hopefully you should be able to copy this method to your project.
My example uses integrity/crossorigin attributes for:
RequireJS itself (through the index.html file)
jQuery (via the config file main.js and the interesting thing for you)
This is built on the RequireJS hook onNodeCreated and code like
onNodeCreated: function(node, config, module, path) {
node.setAttribute('integrity', integrityForModule);
node.setAttribute('crossorigin', 'anonymous');
}
Please note that this example does NOT use SRI for the config file main.js file. In order to accomplish that, either
include the RequireJS config inline in the index.html page
...or reference main.js (the config file) through an extra script tag (with integrity/crossover), and not via the data-main attribute
I have included requirejs with the data-main entry point as described here in the docs.
<script data-main="js/app-main" src="js/lib/require.js"></script>
The app-main.js file looks like this:
requirejs.config({
baseUrl: 'js/myapp/',
...
});
requirejs(['main']);
I want to separate the require configuration from the main execution (to share the config between production and testing environments for example).
So basically I need an app.js file (with configuration only):
requirejs.config({
baseUrl: 'js/myapp/',
...
});
and the main.js file which starts the app execution (not included in testing environment).
How can I include those two files (in the correct order) with the single data-main entry point?
I have tried with an app-main.js file containing require(['app','main']); but it doesn't works.
You could ditch the data-main convenience method, and include them manually.
<script src="js/lib/require.js"></script>
<script>
// Optionally set base url depending on environment.
// Otherwise could just include in app.js
require.config({baseUrl : <% baseUrl %>})
//require app config file first
require(['app'], function() {
require(['main'])
});
</script>
Although this creates an extra HTTP request, if you are using the r.js optimizer, this shouldn't be a problem, as you can bundle require.js into the main config module.
I'm confused about my r.js optimised script. I imagine the answer to my question is in the documentation but I think I'm going doc-blind from staring at it too long.
My application has a directory structure like this
-index.htm
-js/app.js
-js/init.js
-js/appname/*.js
When in non-optimised mode index.htm contains the following line:
<script type="text/javascript" data-main="js/app" src="js/lib/require-2.1.11.js"></script>
and everything works fine. My abridged js/app.js script looks like this:
requirejs.config({
baseUrl: 'js',
paths: {
...
}
});
require(['init']);
When I build the optimised script I specify js/app.js as the mainConfigFile and everything builds as expected. However when I update my script tag's data-main attribute to the build product my application doesn't initialise.
If I manually execute require(['init']) in the console it starts up as expected. Because r.js is using js/app.js as its config file that doesn't get included in the optimised script, which means my require(['init']) also doesn't get included.
I thought I could fix this by moving require(['init']) to the end of js/init.js and this does fix the optimised build (it initialised as expected), but now that the call isn't in js/app.js the non-optimised version never initialises. If I include the call in both files I get an error.
How can I ensure my first module is required after either the optimised or non-optimised file(s) are loaded? I don't understand how I'm supposed to make that first call after my first module's dependencies have fully loaded.
Because r.js is using js/app.js as its config file that doesn't get included in the optimised script
Well, then modify the build config you pass to r.js so that js/app.js is included in the final optimized bundle. There's nothing that forbids you from including the file you point to with mainConfigFile in the final bundle.
Alright, I've got a multi-page site with page-specific modules. Each page should load two JS files generated by r.js: main.js, which is a collection of all modules available globally, and "page-name-here".js, which is a collection of the modules only needed for the current page.
I tried to pattern it somewhat off of this response to a similar question: https://stackoverflow.com/a/11730147/843490.
I also wanted to structure it so that I wouldn't have to explicitly include jQuery as a dependency in every module, but that it would just be loaded and executed first.
Build.js file: http://pastebin.com/XP2cCh18
Main.js file: http://pastebin.com/vsAnm99S
The r.js tool seems to be compiling everything correctly with all modules written into main.js and "page-name-here".js. BUT, when I load the page, require js starts bringing in EVERY global module individually even after main.js has loaded. I assume this is due to global.js not being listed explicitly as a dependency, but I'm unsure of have to tweak it to remedy this.
Any clues? Thanks!