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

要求而不是最后導入是很重要的。 如果使用導入，那么在觸摸打孔導入之后，在窗口上設置jQuery全局的代碼將不會運行，因為導入在其他所有內容之前運行。