Lodash.js与Underscore.js全局变量冲突的替代解决方案咨询
Lodash.js与Underscore.js全局变量冲突的替代解决方案咨询
我最近在给现有应用集成第三方插件时,碰到了Lodash.js和Underscore.js的全局变量冲突问题,试了几种脚本加载顺序都有坑,想请教下有没有更优雅的解决办法,不用大规模修改现有代码的那种。
先跟大家说下我的场景:
- 整个现有应用都是基于Underscore.js开发的,全局变量
_一直指向Underscore的实例 - 要集成的插件包含4个JS文件,其中
abc_vendors.js是通过Webpack打包的,内部悄悄引入了Lodash.js,同样会占用全局的_变量
两种加载顺序的问题
1. 先加载Underscore,再加载插件
这种情况下,应用代码会直接报错——因为插件加载后,Lodash会把全局的_给覆盖掉,应用里原本依赖Underscore的代码调用_时,拿到的却是Lodash,两者的API存在一些差异,导致业务逻辑直接出错。
对应的加载代码:
<script src="~/js/bundled/jquery.js"></script> <script src="~/js/bundled/underscore-lib.js"></script> <!-- 插件脚本 --> <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>
2. 先加载插件,再加载Underscore
反过来的话,插件代码会报错——Underscore加载后会把_抢回来,插件里依赖Lodash的代码调用_时拿到的是Underscore,自然找不到需要的方法,插件功能直接失效。
对应的加载代码:
<script src="~/js/bundled/jquery.js"></script> <!-- 插件脚本 --> <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脚本 --> <script src="~/js/bundled/underscore-lib.js"></script>
我目前的临时解决方案
现在我能想到的办法,是先加载Underscore,然后用它的noConflict()方法把实例存到全局的window.underscore上,把_变量让给Lodash:
<script src="~/js/bundled/jquery.js"></script> <script src="~/js/bundled/underscore-lib.js"></script> <script> // 把Underscore的实例存到自定义变量上,释放_给Lodash window.underscore = _.noConflict(); </script> <!-- 插件脚本 --> <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,这涉及到上百个文件的修改,工作量实在太大了,而且很容易漏改导致新的问题。
所以想请教下各位大佬,有没有其他更合适的解决方案?既能让插件正常使用Lodash,又能让现有应用继续用_来调用Underscore的方法?
内容来源于stack exchange
相关产品推荐
相关产品推荐

