不使用组件时如何使用browserify管理依赖关系？答案

【问题标题】：How to manage dependencies with browserify when not using components?不使用组件时如何使用browserify管理依赖关系？
【发布时间】：2015-06-19 18:52:31
【问题描述】：

我正在使用 gulp 和 browserify 将我所有的 js 依赖项拉到一个文件中，然后缩小文件以用于生产。问题是我需要我的模块的顺序不是它们的输出顺序。

作为一个简化的例子，我有一个 script.js 文件，基本上是这样的：

var $         = require('jquery');
var gsap      = require('gsap');
var hi        = require('hoverintent'); 

$('#someID').hoverIntent(function(){
    //do something
},function(){
    //do something
}

但我收到错误“hoverIntent 不是函数”。

我查看了输出文件，发现 browserify 在 jQuery 之前编写了 hoverIntent 插件，这是一个依赖项，即使我首先需要 jQuery。

这是正常行为吗？如果是这种情况下依赖管理的最佳实践是什么？我过去对 browserify 的有限经验是使用 reactjs，在这种情况下，我需要每个组件的依赖关系工作正常。对于不使用组件的网站/应用程序的最佳做法是什么？

【问题讨论】：

标签： javascript jquery gulp browserify

【解决方案1】：

您的问题是您依赖hoverIntent 插件的副作用将其功能添加到jQuery。这就是为什么 jQuery 插件/扩展是一种气味，但让我们忽略它。

您应该有一个需要 jQuery 的模块，将您的 hoverIntent 函数添加到 jQuery，然后导出现在具有该函数的 jQuery。然后一切都应该使用该模块而不是直接需要 jQuery。

普通的 CommonJS 模式是：

有一些行为 - 将其包装在一个模块中。
当您需要该行为时，请使用该模块并将其与您需要的变量名一起使用。

请注意在上面的代码中 #2 是如何被违反的——你需要 hoverintent 作为 hi 但不要这样使用它。因此，通过在您的自定义 jQuery（即 jQuery 加上 hoverintent）中解决这个问题，您可以将这种恼人的模式违规推送到一个模块，而不是在整个代码库中重复它。

您当然可以在查看插件时扩充 jQuery。另一个回复包括示例，我将其放在这里：

var $ = require('jquery');
require('hoverintent-jqplugin')($);

我的观点是你现在对 jQuery 进行了变异，最好将这个变异放在一个地方。这就是为什么我建议将其下推到一个模块。变异，我的意思是当另一个模块在这个模块之后需要 jQuery 时，它将有 .hoverIntent 但如果它之前需要 jQuery，它不会。如果您团队的其他成员没有 100% 理解这一点，事情就会变得一团糟（如果他们理解了，它仍然是一团糟）。

【讨论】：

Pythonic 的答案确实展示了一种很好的方式，即插件将自身添加到您传递给它的 jQuery 中
@JuanMendes 是的，你可以这样做。它当然也会起作用。但是您需要在需要插件的任何地方执行此操作。所以这是一个偏好问题。
@Cymen 对于要在模块中使用的任何功能，您都可以“到处做”:)

【解决方案2】：

如果您在 npm 上使用 hoverintent 包，它似乎不是 jQuery 插件，这可以解释您遇到此问题的原因。

如果是这种情况，您可能会更幸运地使用hoverintent-jqplugin（根据自述文件），如下所示：

var $ = require('jquery');
require('hoverintent-jqplugin')($);

【讨论】：