How to correctly include lodash/underscore on website with conflicting libs?

Question

I have a website that includes a number of third-party js modules via script tag. I need to add lodash or underscore for my code, but if I simply add it from CDN like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>

then badly written libs die terrible death because they expect _ to be something else. I know that lodash/underscore have something called "no conflict" mode, that requires js code to be executed:

var lodash = _.noConflict();

But this code needs to be executed somewhere, and it's really hard for me to ensure that it's executed before all badly written libs. Is it any simple way to include lodash already in noconflict mode, so i don't need to search for a safe place to enable noconflict mode manually? like lodash.min.noconflict.js?

Answer 1

As long as there are no relevant async scripts before the manual method, it should always work:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
<script>
_u = _.noConflict(); // lets call ourselves _u
</script>

It makes no difference if other scripts set/use _ before or after this. (lodash remembers the last setting of _ and restores it on the _.noConflict() call.)

But if scripts before this are async there is always a possibility that they are allowed to execute between these two scripts. You would have to either use AMD or combine the manual setting into the same script as lodash to avoid races with async scripts.