jQuery UI $（...）。sortable不是WebPack的函数 [英] jQuery UI $(...).sortable is not a function with WebPack

问题描述

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

I believe I've set everything up correctly, but I'm getting an odd issue with Webpack.

考虑这个简单的应用程序。 ts file：

Consider this simple app.ts file:

'use strict';

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

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

所有内容编译都很好，但是当网站运行时它会抱怨 Uncaught TypeError：$（...）。sortable不是函数。 （ sortable 是一个jQuery UI函数）。

Everything compiles fine, but when the site is run it complains that the Uncaught TypeError: $(...).sortable is not a function. (sortable is a jQuery UI function).

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

Everything works fine when I instead link to a CDN hosted version of jQuery and jQuery UI, but it doesn't work when I use JS modules and Webpack. Why is this?

为什么jQueryUI函数 sortable（）无法识别？

Why is the jQueryUI function sortable() not recognized?

推荐答案

问题是jQuery UI通常会自动引入它需要的组件（这就是它通过CDN链接时的工作原理），但是没有当它作为模块导入时（比如Webpack）工作。

The problem is that jQuery UI normally automatically pulls in the components it needs (which is why it works when it's linked via a CDN), but that doesn't work when it's imported as a module (like with Webpack).

值得庆幸的是，从jQuery UI 1.11开始，您可以手动拉入所需的任何额外组件，如下所示：

Thankfully as of jQuery UI 1.11 you can manually pull in any extra components you need like so:

'use strict';

import $ = require('jquery');

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

等。

这里有一些官方文档进一步解释这一点。

Here's some official documentation explaining this further.

这篇关于jQuery UI $（...）。sortable不是WebPack的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！