Importieren von jqueryui mit Typescript und RequireJS

9

Ich habe Probleme bekommen, jQueryUI richtig zu funktionieren. Bevor ich jQueryUI hinzufügen wollte, funktionierte jQuery alleine gut.

Mit dem folgenden Code bekomme ich "TypeError: jQuery ist keine Funktion (...)" in Chrom, was merkwürdig ist, wenn man bedenkt, dass jquery in der Datei require.config als Abhängigkeit markiert ist.

>

Das Kompilieren von .ts nach .js erfolgt ohne Fehler.

initApp.ts:

%Vor%

Zu js kompiliert:

%Vor%

jqueryui.d.ts:

%Vor%

Require.config.js:

%Vor%

Verzeichnisbaum:

%Vor%

Links zu vollständigen d.ts-Dateien:

Ссылка Ссылка

Jede Hilfe wäre sehr willkommen

    
Hackily 11.02.2016, 17:11
quelle

3 Antworten

2

Sie haben also jQuery mit einem Export und jQueryUi, das jQuery importiert, erweitert und dann $.widget nicht $.

Deshalb, wie ich denke, haben Sie bereits darauf hingewiesen,

%Vor%

ist problematisch.

Wie Sie weitermachen,

%Vor%

Funktioniert nicht, weil jQueryUi niemals in einer value -Position verwendet wird. Daher wird es vom Compiler ignoriert, was wirklich sehr nützlich ist, wenn es ein trickreiches Verhalten ist, das eine Reihe von asynchronen Ladeszenarien erzeugen kann einfacher.

Was Sie brauchen, ist eine Möglichkeit, TypeScript anzuweisen, einen Import der Bibliothek durchzuführen, unabhängig davon, ob sie tatsächlich verwendet wird oder nicht, dh wir importieren sie wegen ihres Nebeneffekts.

Glücklicherweise hat TypeScript eine solche Importform, die wiederum von ECMAScript

stammt %Vor%

Sollte das der Fall sein, sollten Sie die Shims für jQuery heutzutage nicht brauchen (zitiere mich nicht, meine AMD ist rostig).

Sie sollten also nur Folgendes brauchen:

%Vor%

Sie sollten Ihre require.config(....) nicht ändern müssen, aber ich könnte sie falsch lesen.

Beachten Sie auch die jquery-ui-Deklarationen , die Sie wahrscheinlich verwenden sollten update (Ihr Link war aufgrund der Paketumstrukturierung tot) deklariert kein export und referenziert jQuery als global, was mehrere Versionen von .d.ts -Szenarien saugt und durcheinander bringt, aber keine praktische Laufzeit darstellen sollte Unterschied in Ihrem Fall.

    
Aluan Haddad 27.02.2017, 09:27
quelle
0

Meine anfängliche Problemumgehung war in den Hauptteil meiner Frage eingebettet. Ich wiederhole es als Antwort auf die redaktionellen Richtlinien von StackOverflow.

Alanans Antwort beantwortet direkt einige der Fragen, die ich in diesem Block gestellt habe.

Ich kann den Fehler manuell beheben, indem ich das kompilierte Javascript so modifiziere, dass es sowohl "jquery" - als auch "jquery-ui" -Module enthält und diese Variablen zuordnet:

  

define (["require", "exports", " jquery ", " jquery-ui "], Funktion (require, exports, jQuery , jQueryUI ) {...}

Ich wollte jedoch, dass der Typskript-Compiler dies automatisch vornimmt, oder etwas Ähnliches, um sowohl jquery-ui als auch jquery als Abhängigkeiten meiner Datei festzulegen.

TypeScript übernimmt den deklarierten Modulnamen und kompiliert diesen String in die Abhängigkeitsparameter der AMD define () - Funktion. Daher muss die d.Ts-Datei für die TypeScript-Definition das Modul mit derselben Zeichenfolge deklarieren, die meine Bibliothek in require.config.js

darstellt

Wenn Sie eine import-Anweisung verwenden, wird keine Aktion vom TypeScript-Compiler ausgelöst. Die Variable (in diesem Fall foo), in die die Eigenschaften des Moduls / der Bibliothek importiert werden, muss mindestens einmal aufgerufen werden und darf nicht mit vorhandenen Variablen in diesem Bereich in Konflikt stehen.

Früher habe ich diese Zeile verwendet:

  

import * als jQuery von "jquery-ui"

Dies hat den Variablennamen 'jQuery' belegt, und daher konnte die jQuery-Funktion nicht mehr diesem Variablennamen zugewiesen werden, was zu dem Fehler führte: "jQuery ist keine Funktion (...)"

Da jquery-ui einfach die jQuery-Bibliothek erweitert, muss ich sie nie aufrufen. Aber der Compiler ist mir zu schlau geworden und hat entschieden, jquery-ui nicht zu einer Abhängigkeit in meiner Definition zu kompilieren (...). Dies war eine einfache Lösung, sobald ich das Problem erkannte.

Endgültiger Code

initApp.ts

%Vor%

Zu js kompiliert:

  

define (["require", "exports", "jquery-ui"], Funktion (require, exports, jQueryUI) {...}

require.config.js

%Vor%     
Hackily 01.03.2017 16:09
quelle
0

Ich habe ein kleines Beispiel auf GitHub für die Verwendung von TypeScript 2 mit ES 6-Modulen und JQuery / JQuery UI mit benutzerdefinierten Plugins erstellt, ich hoffe, das wird helfen: Ссылка

    
Louis GRIGNON 07.03.2017 08:11
quelle