JQuery HoverIntent不使用Webpack和ProvidePlugin

Question

I have the following...

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");

When I run the application I get...

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

Can someone see what I am missing?

Update

In jquery.hoverIntent I notice that it is taking the AMD path here...

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

So I tried this in my typescript...

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

But when I run in the factory function $ is undefined despite window['$'] being valid...

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

Update 2

This seems to work, however, I thought this was what the plugin was doing as well...

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

So why does that work and not using the Provide Plugin.

Answer 1

As you stated, hoverIntent doesn't use proper a proper amd-style definition, and therefore an extra step is needed when including it in webpack. It doesn't need the Provide plugin or need to use jquery attached to the window, however. I was able to get it to work with:

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