如何在 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');

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