如何在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传递给触摸？

我将这个样板用于我的项目.

Answer 1

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

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

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

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