将 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 魔法？还是我想的？

编辑：

这里看起来像

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文件中加载是一个很好的候选者。

希望对您有所帮助！

将 Aurelia 与 Webpack 结合使用时找不到模块 'jquery-ui'

Cannot find module 'jquery-ui' when using Aurelia with Webpack

jquery-ui

typescript

webpack

aurelia