如何防止外部脚本覆盖我的main.js配置

Question

I'm building an application using require.js. For a certain part I need to load a 3rd-Party script that is built using require.js as well (it's all minified and built into a single file using almond.js).

For this I inject the script tag like:

var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.onload = function(){
    // remote widget script has loaded
    scriptDfd.resolve();
};
script.src = endpoints.widgetScript + '?appKey=' + auth.userAppKey + '&dev=1';
document.getElementsByTagName('head')[0].appendChild(script);

The script gets injected fine and is working, but from that point on I cannot use the module mapping defined in my own main.js anymore.

The error that is thrown when I try to access my modules is Uncaught TypeError: Cannot read property 'splice' of undefined which sounds like it's not able to find the module anymore (which is easily accessible before I inject the 3rd party script).

Is there any feasible workaround for this?

Answer 1

So, as proposed in the comments I contacted the vendor of the external script (that is actually just dogfooding the dogfooding of another in-house product) and they used a custom namespace when running the r.js build script as described here .

This creates two seperate require.js's that can be configured differently.