将 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 魔法？或者我是这么认为的？

编辑： Adding a module dependency in Aurelia with Webpack

这里看起来像

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 文件中。

希望这会有所帮助！