jquery - 如何在 Angular 2 Webpack 应用程序中导入 jquery ui touch punch？

Question

我有 jQuery 范围 slider 小部件，我可以像这样导入和使用它:

declare var jQuery: any;

import 'jquery-ui/ui/widgets/slider';
import 'jquery-ui/ui/widgets/mouse';

并像这样使用它:

jQuery(this.elementRef.nativeElement).find('#range-slider').slider({..});

我的 slider 工作正常。

问题是我需要启用移动触摸的 slider ，所以我导入了 jQuery UI Touch Punch:

declare var jQuery: any;

import 'jquery-ui/ui/widgets/slider';
import 'jquery-ui/ui/widgets/mouse';
import 'jquery-ui-touch-punch';

但它的错误是:

TypeError: Cannot read property 'prototype' of undefined

显然它找不到jQuery 和jQuery UI。但是，当导入的 jQuery 不在全局范围内时，如何将 jQuery 传递给 touch punch？

我使用 this我的项目的样板。

Answer 1

这对我有用(可排序而不是 slider ，但想法相同):

import * as $ from 'jquery';
import 'jquery-ui/ui/widgets/sortable';

(window as any).jQuery = $;
require('jquery-ui-touch-punch');

最后的 require 而不是 import 很重要。如果您使用导入，则设置 jQuery 全局窗口的代码将在触摸打洞导入之后才会运行，因为导入先于其他所有内容运行。