Ich glaube, ich habe alles richtig eingerichtet, aber ich bekomme ein seltsames Problem mit Webpack.
Betrachten Sie diese einfache app.ts -Datei:
Alles wird gut kompiliert, aber wenn die Seite ausgeführt wird, klagt es, dass Uncaught TypeError: $(...).sortable is not a function . ( sortable ist eine jQuery UI-Funktion).
Alles funktioniert gut, wenn ich stattdessen auf eine CDN-gehostete Version von jQuery und jQuery UI verlinke, aber es funktioniert nicht, wenn ich JS-Module und Webpack benutze. Warum ist das?
Warum wird die jQueryUI-Funktion sortable() nicht erkannt?
Das Problem ist, dass jQuery UI normalerweise die benötigten Komponenten automatisch einliest (weshalb es funktioniert, wenn es über ein CDN verbunden ist), aber das funktioniert nicht, wenn es als Modul importiert wird (wie bei Webpack).
Zum Glück können Sie ab jQuery UI 1.11 alle zusätzlichen Komponenten wie folgt manuell einfügen:
%Vor%usw.
Hier finden Sie einige offizielle Dokumentationen , die dies weiter erläutern.
Diese Antwort ist lediglich eine Zusammenfassung von zwei hilfreichen anderen Antworten: Antwort 1 , Antwort 2
Zuerst sollten Sie wissen, dass jquery-ui-dist und jquery-ui-bundle vom jquery-ui-Team nicht gepflegt werden. Sie werden es wahrscheinlich vermeiden wollen. Trotzdem können Sie ab jquery-ui Version 1.11 AMD anfordern / importieren, und ab Version 1.12 können Sie das offizielle Paket mit npm verwenden.
Lösung 1:
Der bevorzugte Weg ist dann, einen Teil von jquery-ui zu importieren, beispielsweise:
Der einzige Nachteil ist, dass Sie, wenn Sie zuvor import 'jquery-ui' verwendet haben, jetzt alle Module importieren müssen, die Sie spezifisch verwenden möchten. Aber das ist besser, da es nur die Importe bündelt, die Sie wirklich brauchen.
Überprüfen Sie die 1.11 AMD Support-Dokumentation und die 1.12 npm dokumentation auf ihrer Website.
Lösung 2:
Wenn Sie jedoch aus irgendeinem Grund einen einzelnen globalen jquery-ui-Import verwenden möchten, müssen Sie Ihre Webpack-Konfiguration anpassen:
Stellen Sie zunächst sicher, dass webpack die jquery-Aliase kennt:
%Vor%Helfen Sie dem Webpack beim Auflösen des jquery-ui js-Standorts:
%Vor%Stellen Sie dann sicher, dass jquery-ui so schnell wie möglich geladen wird (vielleicht während des Starts?)
%Vor%Wenn Sie ein Thema mit jquery-ui verwenden möchten, müssen Sie den css-loader und den file-loader entsprechend einrichten. (Vergessen Sie nicht, diese Lader zu installieren):
%Vor%Und unter euch importiere jquery und jquery-ui einfach hinzufügen:
%Vor% Sie verwenden falsche ES6-Import-Syntax, aber es würde immer noch nicht funktionieren, wenn es richtig war.
sortable wird nicht erkannt, da $ nicht innerhalb von jquery-ui module verfügbar ist.
Diese Lösung ist nicht optimiert, weil Sie ganze jquery-ui importieren.
npm install --save jquery-ui-bundle
index.js
%Vor%webpack
%Vor%Tags und Links javascript npm webpack