RequireJS using multiple data-main's
Question
I'm using RequireJs 2.0 (or attempting to use).
Currently, my assets are grouped into to parts, "General" and "Custom". All pages, should use the General scripts, while only some pages should use the Custom.
From what I can tell RequireJs, accepts one data-main value which holds your config and basically your module require's. This is fine if all pages use the same assets, but how would I add an additional data-main script for Custom pages?
Thank you!
1 answers
solution1
3 2012-05-31 19:17:04
Use your data-main attribute to load your General script. On the custom pages, wherever you're about to do something that requires a Custom module, just wrap it in a require call. Your master page (or template or layout or whatever it's called on your server platform) would have this:
<html><head>
<script language="javascript" src="require.js" data-main="general" ></script>
</head>
Your custom page markup can look like this (syntax from memory; double-check!)
<p class="funny">I'm a funny paragraph</p>
<script language="javascript">
require(['funny-stuff'], function(fs) {
fs.doSomthing();
});
</script>
The funny-stuff module would only get loaded by pages that ask for it. If you don't want to or can't have separate markup on some pages, you can dynamically load a dependency from your main script by wrapping a require call inside an if statement. Within general.js :
// Determine if we need the custom module
if (isFunnyPage()) {
require(['funny-stuff'], function(fs) {
fs.doSomething();
});
}
You do have to be careful when you run the optimizer, because it will find the dependency referenced in the require call, and by default package it with your main file. So you would need to configure the optimizer to exclude the custom modules.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.