冲突库lodash.js和underscore.js

Question

我的项目使用lodash.js库。关闭后，我需要将我的项目添加到另一个使用underscore.js库的项目。这使我陷入了这两个库之间的冲突错误。

我试着写这篇文章，但它没有改变任何东西：

<script src="/web/externals/underscore/underscore.js"></script>
<script src="/web/externals/lodash/lodash.js"></script>

<script>
    window.lodash = _.noConflict();
    window.underscore = _.noConflict();
</script>

<app-root></app-root>
<script type="text/javascript" src="/etc/inline.bundle.js"></script>
<script type="text/javascript" src="/etc/polyfills.bundle.js"></script>

/编辑/

<script src="/web/externals/underscore/underscore.js"></script>
<script src="/web/externals/lodash/lodash.js"></script>

<script>
    var lodash = _.noConflict()
</script>

<app-root></app-root>
<script type="text/javascript" src="/etc/chat/inline.bundle.js"></script>
<script type="text/javascript" src="/etc/chat/polyfills.bundle.js"></script>

Answer 1

要在这种情况下使用noConflicts，您需要导入一个库，使用_.noConflicts，然后导入另一个库。例如：

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<script>
    window.lodash = _.noConflict();
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script>
    window.underscore = _.noConflict()
</script>
  

<script>
    console.log("Lodash version is " + lodash.VERSION)
    console.log("Underscore version is " + underscore.VERSION) 
</script>

​

不过，将你的应用程序与webpack之类的东西捆绑在一起可能是值得一试的。这将允许每一个都有自己版本的依赖项，而不需要争夺全局范围。

Answer 2

您只需调用noConflict一次，也不需要更改窗口对象(尽管您可以这样做，但这是完全不必要的)。复制以下代码，将其放入HTML文件中，将其加载到您喜欢的浏览器中，然后检查控制台。您将看到它工作时没有任何冲突

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
<script>
    var __ = _.noConflict();
</script>

<script src="http://underscorejs.org/underscore-min.js"></script>
<script>
  var string = 'test';
  var array = ['1', '2', '3'];

  //starts with is a lodash function
  console.log(__.startsWith(string, 't'));

  //shuffle is an underscore function
  console.log(_.shuffle(array));
</script>

您可以随心所欲地命名lodash变量，并将下划线保留为_

如果您更喜欢将lodash保留为_并重命名为下划线，那么只需交换这两个脚本的加载顺序

 <script src="http://underscorejs.org/underscore-min.js"></script>
<script>
    var __ = _.noConflict();
</script>

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
<script>
  var string = 'test';
  var array = ['1', '2', '3'];

  console.log(_.startsWith(string, 't'));
  console.log(__.shuffle(array));
</script>

如果这对你不起作用，那么还有其他问题，你需要发布更多的代码。