JQuery HoverIntent 不适用于 Webpack 和 ProvidePlugin答案

【问题标题】：JQuery HoverIntent not working with Webpack and the ProvidePluginJQuery HoverIntent 不适用于 Webpack 和 ProvidePlugin
【发布时间】：2016-12-20 10:07:09
【问题描述】：

我有以下...

webpack.config.js

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

deps.ts

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

test.coffee

$('.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; 
    }
    ...
})

所以我在我的打字稿中尝试了这个......

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['$']);

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

【问题讨论】：

标签： jquery coffeescript webpack

【解决方案1】：

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

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

【讨论】：