javascript - jQuery UI $(...).sortable 不是 WebPack 的函数

Question

我相信我已经正确设置了所有内容，但我遇到了 Webpack 的一个奇怪问题。

考虑这个简单的 app.ts 文件:

'use strict';

import $ = require('jquery');
import 'jquery-ui';

$(function() {
    $( "#sortable" ).sortable();
});

一切都编译得很好，但是当站点运行时它提示 Uncaught TypeError: $(...).sortable is not a function。 (sortable 是一个 jQuery UI 函数)。

当我改为链接到 CDN 托管版本的 jQuery 和 jQuery UI 时一切正常，但当我使用 JS 模块和 Webpack 时它不起作用。这是为什么？

为什么无法识别 jQueryUI 函数 sortable()？

Answer 1

问题是 jQuery UI 通常会自动拉取它需要的组件(这就是它在通过 CDN 链接时可以正常工作的原因)，但是当它作为模块导入时(例如 Webpack)就不起作用了。

值得庆幸的是，从 jQuery UI 1.11 开始，您可以像这样手动拉入任何您需要的额外组件:

'use strict';

import $ = require('jquery');

require('jquery-ui');
require('jquery-ui/ui/widgets/sortable');
require('jquery-ui/ui/disable-selection');

等等

这是一些 official documentation进一步解释这一点。