使用Aurelia和Webpack时找不到模块'jquery-ui'

Question

我试图让一个简单的日期选择器在aurelia工作,但我想我错过了一些非常基本的东西.

我在这里使用带有webpack的aurelia骨架

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

在此之后,我假设它安装下一个Jquery-ui.

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

看这里一切看起来都很简单.但无论我做什么,我都会在这一行上找到"[ts]无法找到模块'jquery-ui'"

import { datepicker } from "jquery-ui";

我无法弄清楚如何让模块正常工作.

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

还有什么遗漏吗？

既然我使用webpack,我不需要任何jspm魔法？还是这样我想？

编辑: 使用Webpack在Aurelia中添加模块依赖项

这看起来像

npm install jquery-ui --save

我所需要的.还是同样的问题

编辑:完成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

由于jquery-ui不导出任何内容,因此您只需导入它,而无需加载任何对象或函数.

所以,替换这个:

import { datepicker } from "jquery-ui";

为了这:

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

现在你可以使用jquery-ui扩展函数,比如$ .datepicker,$ .accordion等.

但是,还有另一个问题.与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会将所有引用的css捆绑到一个文件中,这意味着在项目中引用"node_modules"文件夹并不是一件大事,因为您不必在生产环境中创建此文件夹.

如果在整个应用程序中使用了jquery-ui,那么它是一个很好的候选者,可以加载到main.js或app.js文件中.

希望这可以帮助!