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

Question

我有jQuery范围滑块小部件，我导入并使用如下：

declare var jQuery: any;

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

并像这样使用它：

jQuery(this.elementRef.nativeElement).find('#range-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传递给触摸？

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

Answer 1

这对我有用（可排序而不是滑块但是同样的想法）：

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

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

最后需要而不是导入很重要。如果使用导入，那么在触摸打孔导入之后，设置jQuery全局窗口的代码将不会运行，因为导入是在其他所有内容之前运行的。