javascript - How to handle two different data-main attributes in same page? -

i developing plugin web applications uses many external jss jstree, bootstrap , jquery. using require load of these dynamically.

---

so end user have use plugin include line in there html.

<script data-main="http://host.name/pathto/main" src="http://hostname/path.to/require.js"></script> 

but problem arises when app wants use plugin using requirejs internal purpose. html have 2 requirejs data-main attributes like:

// app's requirejs <script data-main="app/lib/main" src="app/lib/require.js"></script> // include plugin have developed. <script data-main="http://host.name/pathto/main" src="http://hostname/path.to/require.js"></script> 

so when there 2 different requirejs instance loads first one's files , other ones never included. solution in such case when developing addon using requirejs?

as you've discovered cannot have 2 data-main on same page. first <script> tag loads requirejs load , execute it, , requirejs take care of loading code in corresponding data-main. second <script> tag load , execute requirejs again requirejs detect already loaded , stop executing right there.

you should have plugin loaded through require or define call or through deps configuration option.

if code needs add configuration can call require.config() again. requirejs combines multiple configurations passed require.config() together. depending on use-case scenario may want use context option keep configuration used code separate main application. if end having use separate context, this:

<!-- load app. --> <script data-main="app/lib/main" src="app/lib/require.js"></script> <!-- load plugin. --> <script>     var my_require = require.config({         context: "plugin_context",         baseurl:...     });     my_require(["main"]); </script>