首页 文章

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

提问于
浏览 次
2

我试图让一个简单的日期选择器在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');
    }
}
jquery-ui typescript webpack aurelia

1 回答

  • 5

    由于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文件中 .

    希望这可以帮助！

    回复于

相关问题