RequireJS - Importing modules inside r.js optimized bundle

Question

Is it possible to import individual modules from within an optimized RequireJS/r.js bundle?

I have a javascript project broken up into two separate components - 'MyLibrary' and 'MyApplication'

MyLibrary consists of two separate modules, 'MyModule1' and 'MyModule2'.

In development mode, I can import each of these modules using RequireJS with the normal define(['MyLibrary/MyModule1'],function(){}) syntax from MyApplication.

However once running MyLibrary through r.js, this no longer appears to be possible - there doesn't appear to be a way to reference the internal modules directly anymore?

I can see from the compiled/optimized source that there are define() blocks for each module, however RequireJS within My Application doesn't appear to be able to reference these directly.

Is this possible, or will I need to bundle my entire application into a single file for this to work.

Edit: The RequireJS optimization phase is being done my the Play framework, and I have minimal control over the build config.

({appDir: "javascripts",
[info]           baseUrl: ".",
[info]           dir:"javascripts-min", mainConfigFile: "javascripts/build.js", modules:         [{name: "main"}]})

can you post your r.js build config and any other relevant code? — explunit
The build files are generated on the fly by the framework I'm using (Play 2.1), and there's not much too them. I'll add it anyway. — James Davies

marianc marianc · Accepted Answer · 2015-07-18T09:00:30

In order to use the modules from the library, you need to instruct RequireJS how to find this modules. In main.js you need to have something like this:

  require.config({
      // ...
      paths: {
          // ...
          'MyLibraryBundleName': 'dist/MyLibraryFile',
          // ...
      },
      // ...
      bundles: {
          //...
          'MyLibraryBundleName': ['MyLibrary/MyModule1', 'MyLibrary/MyModule2'],
          //...
      }
  });

When MyApplication is referencing a module like this:

define(['MyLibrary/MyModule1'],function(){})

... as you mention, RequireJS will look for 'MyLibrary/MyModule1' and will find it into the 'bundles' section and after that will check the 'path' section to locate the actual file 'dist/MyLibraryFile' which will be loaded.

RequireJS - Importing modules inside r.js optimized bundle

1 Answers