RequireJS using multiple data-main's

javascript, requirejs

Solution

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.

Problem

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!

Original source