Question

我有以下......

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

那么为什么这样做并且不使用Provide Plugin。

Answer 1

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

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

JQuery HoverIntent不使用Webpack和ProvidePlugin

1 个答案: