如何在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和jQueryUI。但是，当导入的 jQuery 不在全局范围内时，如何将 jQuery 传递给 touch punch？

我在我的项目中使用 this 样板文件。

Answer 1

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

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

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

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

How to import jquery ui touch punch in Angular 2 Webpack app?