WebpackでAureliaを使用しているときに 'jquery-ui'モジュールが見つからない

Question

aureliaで簡単にdatepickerを動作させようとしていますが、ここでは基本的なことを忘れてしまったと思います。

イムは、ここに

https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-typescript-webpack

この後のWebPACKでオーレリア骨格を使用して、私は隣にあり、そのインストールのjQuery-UIを前提としています。ここで探し

http://ilikekillnerds.com/2016/02/using-jquery-ui-widgets-in-aurelia/

それはすべて簡単なようです。しかし、関係なく、私は何をすべきか私は、モジュールが正しく動作して取得する方法を見つけ出すカントこの行

import { datepicker } from "jquery-ui"; 

の「モジュールのjqueryの-UI」を見つけることができません[TS]」 を得続けるん。

npm install jquery 
npm install jquery-ui 
tsd install jquery 
tsd install jqueryui 

ここに他に何かがありませんか？

私はwebpackを使っているので、jspmの魔法は必要ありませんか？それとも私は思った？

編集：

npm install jquery-ui --save 

は私が必要とするすべてであるように Adding a module dependency in Aurelia with Webpack

ここに見えます。それでも同じ問題

編集：jqueryの-UIは何もエクスポートしませんので、完全なdatepicker.tsコード

import { customElement, bindable, inject } from "aurelia-framework"; 

import "jquery"; 
import { datepicker } from "jquery-ui"; 

@customElement('jquery-ui-datepicker') 
@inject(Element) 
export class JqueryUiDatepicker { 
    @bindable id = ''; 
    @bindable name = ''; 
    @bindable options = {}; 

    constructor(Element) { 
     this.element = Element; 

     if (!this.id && this.name) { 
      this.id = this.name; 
     } 

     if (!this.name && this.id) { 
      this.name = this.id; 
     } 
    } 

    attached() { 
     $(`#${this.id}`).datepicker(this.options) 
      .on('change', e => { 
       let changeEvent = new CustomEvent('input', { 
        detail: { 
         value: e.val 
        }, 
        bubbles: true 
       }); 

       this.element.dispatchEvent(changeEvent); 
      }); 
    } 

    detached() { 
     $(`#${this.id}`).datepicker('destroy').off('change'); 
    } 
} 

Answer 1

、あなただけの任意のオブジェクトや関数をロードせずに、それをインポートする必要があります。だから、

、この置き換え：今、あなたは、などの$ .datepicker、$ .accordion、同様に、jqueryの-UI拡張機能を使用することができるだろう

import "jquery-ui"; 
//if you want to load only the datepicker, use "jquery-ui/datepicker"; 

：このため

import { datepicker } from "jquery-ui"; 

を

ただし、別の問題があります。 SystemJSとは異なり、webpackはモジュールファイルに明示的にロードされていない限り、cssファイルを自動的にロードしていないようです。

このため、cssファイルも読み込む必要があります。このように：要するに

import "../node_modules/jquery-ui/themes/base/jquery-ui.css" 
//if you want to load only the datepicker, use "../node_modules/jquery-ui/themes/base/jquery.ui.datepicker.css" 

、これは何が必要です：

import $ from "jquery"; 
import "jquery-ui"; 
import "../node_modules/jquery-ui/themes/base/jquery-ui.css"; 

WebPACKのは、それはあなたのプロジェクト内で「node_modules」フォルダを参照することはないことを意味し、一つのファイルに参照されるすべてのCSSをバンドルしますプロダクション環境でこのフォルダを作成する必要がないため、大きな問題になります。

jquery-uiがアプリケーション全体で使用されている場合は、main.jsまたはapp.jsファイルにロードするのが適切です。

希望すると便利です。