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函数(。

当我链接到 jQuery 和 jQuery UI 的 CDN 托管版本时，一切正常，但当我使用 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');

等。

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

Answer 2

这个答案只是两个有用的其他答案的总结： 答案 1、答案 2

首先，最好知道jquery-ui-dist和jquery-ui-bundle不是由jquery-ui团队维护的。因此，您可能希望避免使用它。尽管如此，从 jquery-ui 版本 1.11 开始，你可以要求/导入 AMD，从 1.12 版本开始，你可以使用 npm 的官方软件包。

解决方案 1
：首选方法是导入 jquery-ui 的一部分，例如：

import 'jquery-ui/ui/widgets/draggable';

唯一的缺点是，如果您以前使用import 'jquery-ui'，则现在必须导入要专门使用的每个模块。但这更好，因为它只会捆绑您真正需要的导入。

查看其网站上的 1.11 AMD 支持文档和 1.12 npm 文档。

解决方案 2：但是，如果出于任何原因您想使用单个全局 jquery-ui 导入，则必须调整您的 webpack 配置：

首先，确保 webpack 知道 jquery 别名：

...
plugins: [
new webpack.ProvidePlugin({
'$':'jquery',
'jQuery':'jquery',
'window.jQuery':'jquery',
'global.jQuery': 'jquery'
}),
...

然后，帮助 webpack 解析 jquery-ui js 位置：

resolve : {
alias: {
// bind version of jquery-ui
"jquery-ui": "jquery-ui/jquery-ui.js",      
// bind to modules;
modules: path.join(__dirname, "node_modules"),

然后，确保尽快加载jquery-ui(也许在启动期间？

var $ = require("jquery"),
require("jquery-ui");

如果你想在jquery-ui中使用主题，你必须相应地设置css-loader和文件加载器。(不要忘记安装这些加载器(：

module: {
loaders: [
{ test: /.css$/, loader: "style!css" },
{ test: /.(jpe?g|png|gif)$/i, loader:"file" },

下面你导入的jquery和jquery-ui只需添加：

import 'modules/jquery-ui/themes/black-tie/jquery-ui.css';
import 'modules/jquery-ui/themes/black-tie/jquery-ui.theme.css';

Answer 3

您使用了不正确的 ES6 导入语法，但如果它是正确的，它仍然不起作用。 无法识别sortable$因为模块jquery-ui不可用。

此解决方案未优化，因为您导入了整个jquery-ui。

npm install --save jquery-ui-bundle

索引.js

'use strict';
import 'jquery-ui-bundle';
$(function() {
$( "#sortable" ).sortable();
});

网络包

plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery'
})
]