I am working on integrating a plugin into my application which resulted in lodash.js and underscore.js conflict. I have underscore.js implemented in my entire application and this plugin which I am integrating has 4 JavaScript files and one of these files has internally added lodash.js using webpack.
So if I call scripts in this order, my application code fails as '_' referred as lodash.js:
<script src="~/js/bundled/jquery.js"></script>
<script src="~/js/bundled/underscore-lib.js"></script>
// Plugin js
<script src="~/js/bundled/abc_common.js"></script>
<script src="~/js/bundled/abc_locales.js"></script>
<script src="~/js/bundled/abc_vendors.js"></script>
<script src="~/js/bundled/abc_ui.js"></script>
and if I call scripts in this order, plugin code fails as '_' referred as underscore js:
<script src="~/js/bundled/jquery.js"></script>
// Plugin js
<script src="~/js/bundled/abc_common.js"></script>
<script src="~/js/bundled/abc_locales.js"></script>
<script src="~/js/bundled/abc_vendors.js"></script>
<script src="~/js/bundled/abc_ui.js"></script>
// underscore js
<script src="~/js/bundled/underscore-lib.js"></script>
To tackle this I have done this change:
<script src="~/js/bundled/jquery.js"></script>
<script src="~/js/bundled/underscore-lib.js"></script>
<script>window.underscore = _.noConflict();</script>
// Plugin js
<script src="~/js/bundled/abc_common.js"></script>
<script src="~/js/bundled/abc_locales.js"></script>
<script src="~/js/bundled/abc_vendors.js"></script>
<script src="~/js/bundled/abc_ui.js"></script>
So now in my entire application I have to replace '_' with 'underscore', leaving '_' for lodash js.
Is there any other way I could handle this? This looks like changes to many files.
