How to load several named AMD modules defined in one file?

Question

I understand that this should not be, but he does . What is the most suitable workaround for these libraries?

Notes:

• I decided to run these scripts after require.js manually (using the script tag), which should work, and it really seems like that. However, the RequireJS documentation explicitly warns that the data-main script runs asynchronously. Although require.js should correctly define the define function needed by scripts defining several named modules, I also assume that without the proper configuration loaded from the data-main script, bad things can happen in a non-deterministic way, is this correct?
• I also don’t see how any combination of the shim , map , bundles and paths configuration properties can help in this case, although I hope that I am missing.

Clarification of the first note: (bad, this is really not clear)

What I am describing here is simply to manually execute (using the HTML script tag) a script that defines several modules after RequireJS and data-main script. Given that the latter is launched by async, my concerns should become more obvious (but feel free to ask me to tell you more in detail). Its main part is that, although it seems that I can successfully use each named module, I’m not sure that the behavior is deterministic (also, this is not very, I would rather avoid additional script tags and load everything asynchronously correctly).

 <script src="scripts/require.js" data-main="app/main.js"></script> <script src="scripts/datajs-1.1.2.js"></script> 

Here, datajs-1.1.2.js defines two modules, as described in the link above and copied below:

 // AMD support if (typeof define === 'function' && define.amd) { define('datajs', datajs); define('OData', odata); } ... 

Answer 1

What will and will not work depends on how the file that defines several named modules will be used in the application.

In general, if the order in which the modules defined (using named defines) in a single file cannot be determined, then setting paths to match the module names to the specified file should prevent problems:

 paths: { 'foo': 'path/to/foobar', 'bar': 'path/to/foobar' } 

If foo or bar required, RequireJS will load a file that defines both ( path/to/foobar.js ), which is not a problem.

With the details that you added to the question, I can say this. Firstly, this code:

 <script src="scripts/require.js" data-main="app/main.js"></script> <script src="scripts/datajs-1.1.2.js"></script> 

wrong. Loading a module that calls define via the <script> tag is usually incorrect. (I would say that this is always wrong, but there may be some really strange cases when you need incompatible assets to work together, you should do something that would normally be wrong. But this is unusual and should be justified.) How when you offer to do this, you open yourself to the questions of time. Sometimes it may work, sometimes it may not.

However, this should prevent any time issues:

 <script> require = { paths: { datajs: 'scripts/datajs-1.1.2', OData: 'scripts/datajs-1.1.2' } }; </script> <script src="scripts/require.js" data-main="app/main.js"></script> 

Whenever either of the two modules in datajs-1.1.2.js , either because it is called require , or because it is called define with the appropriate module names, a file that defines both modules will be loaded.

(Warning: the configuration shown in the example above is an educated guess that contains enough details to illustrate. It may not work in conjunction with the configuration already present in app/main.js , and I don't assume that it this is the best way to configure RequireJS for your specific application.)

For RequireJS version 2.1.10 and higher, there is also a bundles option, which is more convenient to use:

 <script> require = { bundles: { "js/datajs-1.1.2": ["datajs", "OData"] } }; </script> <script src="scripts/require.js" data-main="app/main.js"></script> 

I suggest reading the documentation for this parameter to avoid possible misunderstandings about how this works.