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');

等等

这里有一些official documentation 进一步解释。

Answer 2

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

首先，最好知道jquery-ui-dist 和jquery-ui-bundle 不是由jquery-ui 团队维护的。因此，您可能希望避免使用它。不过，从 jquery-ui 1.11 版开始，您可以 require/import AMD，从 1.12 版开始，您可以将官方包与 npm 一起使用。

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

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

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

在他们的网站上查看1.11 AMD support documentation 和1.12 npm documentation。

解决方案 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 和 file-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

index.js

'use strict';

import 'jquery-ui-bundle';

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

网络包

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