web-dev-qa-db-ja.com

jQuery UI $（...）。sortableはWebPackの関数ではありません

すべてを正しく設定したと思いますが、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()が認識されないのはなぜですか？

javascriptnpmwebpack
10
Chuck Le Butt

問題は、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');

等.

公式ドキュメント でこれをさらに説明します。

20
Chuck Le Butt

この回答は、他の役立つ2つの回答の要約にすぎません： Answer 1 、 Answer 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'
    }),
...

次に、jquery-ui jsの場所を解決するwebpackを支援します。

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';
3
John-Philip

正しくないES6インポート構文を使用していますが、それが正しい場合は機能しません。 sortableは、$がjquery-uiモジュール内で使用できないため、認識されません。

jquery-ui全体をインポートするため、このソリューションは最適化されていません。

npm install --save jquery-ui-bundle

index.js

'use strict';

import 'jquery-ui-bundle';

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

webpack

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