Question

我正在使用glup with 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的经验有限，反应是jj，在这种情况下我需要每个组件的依赖关系工作正常。对于不使用组件的网站/应用，最佳做法是什么？

Answer 1

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

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

正常的CommonJS模式是：

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

请注意上面的代码中违反了＃2 - 您需要hoverintent作为hi，但不要将其用作hoverintent。因此，通过将该问题放在您的自定义jQuery（jQuery plus var $ = require('jquery'); require('hoverintent-jqplugin')($);）中，您可以将令人讨厌的模式违反推送到一个模块，而不是在代码库中重复它。

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

.hoverIntent

我的观点是你现在改变了jQuery，最好把这个变异放在一个地方。这就是我建议将其推向一个模块的原因。通过mutate，我的意思是当另一个模块在此模块之后需要jQuery时，它将具有j = c( 5 , 6, 7, 6, 7,12 , missing , 6 ,7 8, missing , n/a, n/a, 5, 6)但是如果它之前需要jQuery，则不会。如果你的团队的其他人不理解这100％，那么事情可能会变得混乱（如果他们理解它，它仍然是凌乱的。）

Answer 2

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

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

inline-block

如何在不使用组件时使用browserify管理依赖项？

2 个答案: