JQuery HoverIntent 无法与 Webpack 和 ProvidePlugin 一起使用

Question

我有以下内容...

webpack.config.js

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  ...
}),

deps.ts

require('jquery-hoverintent/jquery.hoverIntent.js');

测试.咖啡

$('.item').hoverIntent 
  over: ->
    console.log("The hover is working");

当我运行应用程序时，我得到...

$(...).hoverIntent is not a function

有人能看到我缺少的东西吗？

更新

在 jquery.hoverIntent 中，我注意到它在这里采用 AMD 路径...

(function(factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        define(function () {
            return factory // Taking this path
        });
    } else if (typeof module === 'object' && typeof module.exports === 'object') {
        module.exports = factory;
    } else if (jQuery && !jQuery.fn.hoverIntent) {
        factory(jQuery);
    }
})(function($) {
    'use strict';

    if ($.fn.hoverIntent) {
        return; 
    }
    ...
})

所以我在我的 typescript 中尝试了这个......

var test = require('jquery-hoverintent');
test(window['$']);

但是当我在工厂函数中运行时，尽管 window['$'] 有效，但 $ 未定义...

> $
undefined
> window['$']
$(selector, [startNode]) { [Command Line API] }

更新2

这似乎有效，但是，我认为这也是插件正在做的事情......

window['$'] = window['jQuery'] = require('jquery');
...
require('jquery-hoverintent')(window['$']);

那么为什么它可以工作而不是使用 Provide 插件。

Answer 1

正如您所说，hoverIntent 没有使用正确的 amd 风格定义，因此将其包含在 webpack 中时需要一个额外的步骤。但是，它不需要 Provide 插件，也不需要使用附加到窗口的 jquery。我能够让它工作:

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