Làm cách nào để nhập cú đấm chạm vào giao diện người dùng trong ứng dụng Webpack 2?

Question

Tôi có jQuery loạt trượt widget mà tôi nhập khẩu và sử dụng như thế này:

declare var jQuery: any; 

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

và sử dụng nó như thế này:

jQuery(this.elementRef.nativeElement).find('#range-slider').slider({..}); 

trượt của tôi hoạt động tốt.

Vấn đề là tôi cần điện thoại di động cảm ứng kích hoạt thanh trượt, vì vậy tôi nhập khẩu jQuery UI cảm ứng punch:

declare var jQuery: any; 

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

nhưng nó lỗi với:

TypeError: Cannot read property 'prototype' of undefined 

Rõ ràng nó không thể tìm thấy Giao diện người dùng jQuery và jQuery. Nhưng làm thế nào để vượt qua jQuery để chạm vào cú đấm khi nhập khẩu jQuery không phải là trên phạm vi toàn cầu?

Tôi sử dụng this boilerplate cho dự án của mình.

Answer 1

này đã làm việc cho tôi (sắp xếp được thay vì thanh trượt nhưng ý tưởng giống nhau):

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

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

Các yêu cầu thay vì nhập khẩu ở cuối là quan trọng. Nếu bạn sử dụng nhập khẩu mã mà đặt toàn cầu jQuery trên cửa sổ sẽ không chạy cho đến sau khi nhập cú đấm chạm vì nhập khẩu được chạy trước mọi thứ khác.