Eye of Hell Eye of Hell - 1 month ago 14
HTML Question

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

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

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/2.4.1/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.