Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

RequireJS using multiple data-main's

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!

like image 447
dzm Avatar asked May 31 '12 15:05

dzm


1 Answers

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.

like image 97
Carl Raymond Avatar answered Oct 31 '22 22:10

Carl Raymond