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

Question

我正在使用 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 is not a function"。

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

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

Answer 1

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

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

正常的 CommonJS 模式是：

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

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

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

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

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

Answer 2

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

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

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

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

How to manage dependencies with browserify when not using components?

javascript

jquery

gulp

browserify